下面我用图片和语言文字来完成3D图片旋转+倒影的效果，我们先看HTML部分。如下：
可以看得出我想六张图片来完成这个效果，因为图片这时在浏览器里显示是从上往下排列的，所以我在 <body> 标签里面用flex布局来完成图片往x轴排列，
Justify-content 属性定义了项目在主轴上的对齐方式。 我用了 center 来达到浏览器屏幕居中效果
align-items 属性定义项目在交叉轴上如何对齐 我也是用了交叉轴中点对齐的效果
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 // 通俗点说就是视距，眼睛看视图的距离。
再下我在section设置了相对定位和对应的高度、顶部距离（top）让其达到理想的位置；还加了transform-style：preserve-3d 让其进行3D效果；transform-style属性规定如何在 3D 空间中呈现被嵌套的元素；又用了animation进行动画效果。代码如下：
注：transform-style该属性必须与 transform 属性一同使用。transform我会在下面使用
往下就是给div绝对定位和相应位置，最重要一点就是倒影效果，详细代码注释如下：
再就是给每张图片设置旋转前的位置：
最后keyframes动画，引用前面名称rotate使其图片旋转起来
最终效果图如下：
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
