CSS3实现3D效果的图片墙_html/css_WEB-ITnose
布局结构:
CSS3中新增了translate-style和perspective属性,要让图片有3D的效果就要添加这两个属性,具体的解释这里不再赘述,可以看这篇文章来理解:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
给container添加translate-style为preserve-3d,添加perspective: 2000px;
这里一共10张图片,为了让10张图片围成一个圆,需要添加position属性为absolute,设置宽度相同,居中,这时所有图片都重合在了一起。每张图片绕Y轴旋转36*i(i:0->9)度(rotateY),然后每张图片在Z轴方向移动相同的距离(translateZ),这个距离能保证图片不重合在一起就行。这时图片就围成了一个环状,并且是有3D效果的。然后给container添加动画属性让其绕Y轴不停旋转(rotateY),这时动画就出现了。
注意:给图片添加的属性transform: rotateY(0deg) translateZ(350px);rotateY和translateZ的位置不能交换,因为先旋转后移动和先移动后旋转的效果是不一样的。
这里我给container添加了背景颜色来参考图片的相对位置和旋转轴。
如果要用鼠标点击来切换图片的话,只需要每次点击之后container的旋转角度加36度就可以。
贴上代码:
1 2 3 4 5img_3D 6 7 71 7273 74 75 76 77 78 79 80 81 82 8384 85
上一篇: 浅谈link与@import的区别
下一篇: 计算php函数的执行时间
推荐阅读
-
CSS3实现苹果电脑的DOCK菜单栏_html/css_WEB-ITnose
-
求一个简单的纯CSS3的实现_html/css_WEB-ITnose
-
使用CSS3伸缩盒实现图片垂直居中_html/css_WEB-ITnose
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
HTML5/CSS3专题 CSS3打造百度贴吧的3D翻牌效果的经典案例
-
CSS3实现ToolTip效果_html/css_WEB-ITnose
-
css3实现的动画效果_html/css_WEB-ITnose
-
基于CSS3淡入淡出效果的图片轮播_html/css_WEB-ITnose
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose
-
炫!一组单元素实现的 CSS 加载进度提示效果_html/css_WEB-ITnose