在css中用3D效果实现图片墙,CSS3实现3D效果的图片墙_html/css_WEB-ITnose

先来看一下效果：http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html

布局结构：

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 5 img_3D 6 7 71 72

73

74

75

76

77

78

79

80

81

82

8384 85