利用css制作3D照片墙,具体代码如下所示:
无标题文档
以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意。接着开始着手写样式。
body{perspective: 5800px;}
以上代码是为照片墙设置一个足够大的3D视距,至少能容下所有图片的运动轨迹。
img{position:absolute;height:480px;width:320px;}
以上代码是给每个图片设置样式,给图片一个绝对定位,使其可以被任意地控制位置,此时图片会重叠在一起,宽高取决于照片墙中的的图片的具体尺寸,当然你也可以设置大小,320*480是我举的一个例子。
img:nth-child(1){transform: translateZ(500px);}
img:nth-child(2){transform: translateZ(-500px)