一款CSS实现的3D旋转(三维)效果,叫作:transform-style实例,分别在IE8、opera下测试均无法显示效果,在IE下显示的是层叠效果,在opera下显示的层重叠效果,在chrome浏览器下可以显示三维旋转的层,效果还是非常不错的。
标签: <无>
代码片段(1)
[代码] [CSS]代码
view sourceprint?
01 |
|
02 |
|
03 |
|
04 |
|
05 |
3 D效果测试 |
06 |
|
07 |
*{ font-size : 14px ; color : #fff ; padding : 0 ; margin : 0 ;} |
08 |
#container { |
09 |
position : relative ; |
10 |
height : 300px ; |
11 |
width : 300px ; |
12 |
-webkit-perspective: 500 ; |
13 |
margin-top : 200px ; |
14 |
margin-right : auto ; |
15 |
margin-left : auto ; |
16 |
} |
17 |
#parent { |
18 |
margin : 10px ; |
19 |
width : 280px ; |
20 |
height : 280px ; |
21 |
background-color : #666 ; |
22 |
opacity: 0.8 ; |
23 |
-webkit-transform-style: preserve -3 d; |
24 |
-webkit-animation: spin 5 s infinite linear; |
25 |
} |
26 |
#parent > div { |
27 |
position : absolute ; |
28 |
top : 40px ; |
29 |
left : 40px ; |
30 |
width : 280px ; |
31 |
height : 200px ; |
32 |
padding : 10px ; |
33 |
-webkit-box-sizing: border-box; |
34 |
} |
35 |
#parent > :first-child { |
36 |
background-color : #000 ; |
37 |
-webkit-transform: translateZ( -100px ) rotateY( 45 deg); |
38 |
} |
39 |
#parent > :last-child { |
40 |
background-color : #333 ; |
41 |
-webkit-transform: translateZ( 50px ) rotateX( 20 deg); |
42 |
-webkit-transform-origin: 50% top ; |
43 |
} |
44 |
/*执行Y轴旋转360度动画*/ |
45 |
@-webkit-keyframes spin { |
46 |
from {-webkit-transform: rotateY( 0 );} |
47 |
to {-webkit-transform: rotateY( 360 deg);} |
48 |
} |
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
发表回复