cubeInCss/cube.html at master · ogion13/cubeInCss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cube</title>
</head>
<style type="text/css">
@-webkit-keyframes spin {
	from { transform: rotate(0deg); }
	to { transform:rotate(360deg);  }
}
@-o-keyframes spin {
	from { transform: rotate(0deg); }
	to { transform:rotate(360deg);  }
}
@-moz-keyframes spin {
	from { transform: rotate(0deg); }
	to { transform:rotate(360deg);  }
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform:rotate(360deg);  }
}
	.square{
		width: 60px;
		height: 60px;
		background: #333;
		margin: 30px;
		box-shadow: 0 0 4px rgba(0,0,.4);
		-webkit-animation: spin 20s linear .3s 20;
		-o-animation: spin 20s linear .3s 20;
		animation: spin 20s linear .3s 20;
		-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
		-o-animation: name duration timing-function delay iteration-count direction fill-mode;
		animation: name duration timing-function delay iteration-count direction fill-mode;
	}
	#wrapper{
		margin: 80px;
		prespective:900px;
	}
	#cube{
		transform-origin:50% 50% -150px;
		position: relative;
		width: 300px;
		height: 300px;

		transform-style:preserve-3d;
		transition:all  20s;
	}
	#cube:hover{
		transform: rotate3d(1,1,1,1200deg);
	}
	.side{
		backface-visibility:hidden;
		width: 300px;
		height: 300px;
		background: rgba(0,0,0,0.3);
		background: radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
		position: absolute;
		border: 10px solid #000;
		border-radius: 10px;
		font-size: 5em;
		color: green;
		line-height: 300px;
		text-align: center;
		text-shadow: 0 1px 3px #000;
		box-shadow: 0 0 6px rgba(0,0,0.5);
		transform-origin:50% 50% -150px;

	}
	#side2{
		transform:rotateY(90deg);
	}
	#side3{
		transform:rotateY(-90deg);
	}
	#side4{
		transform:rotateX(90deg);
	}
	#side5{
		transform:rotateX(-90deg);
	}
	#side6{
		transform:rotateY(180deg);
	}
</style>
<body>
	<div class="square"></div>
	<div id="wrapper">
		<div id="cube">

			<div id="side1" class="side">1</div>
			<div id="side2" class="side">2</div>
			<div id="side3" class="side">3</div>
			<div id="side4" class="side">4</div>
			<div id="side5" class="side">5</div>
			<div id="side6" class="side">6</div>


	</div>
	<script>

	</script>
</body>
</html>