3D动画效果实现步骤
3D呈现(transform-style)
3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下:
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内(子盒子被扁平化)
案例:
html部分
<body>
<div class="box">
<div class="up">
<img src="../images/6.jpg" alt="">
</div>
<div class="down">
<img src="../images/1.jpg" alt="">
</div>
<div class="left">
<img src="../images/2.jpg" alt="">
</div>
<div class="right">
<img src="../images/3.jpg" alt="">
</div>
<div class="forward">