纯css样式实现盒子 3D 旋转、鼠标悬停效果

https://blog.csdn.net/lwpoor123/article/details/75042725?utm_source=blogxgwz7

首先，用到的是 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换（对目标使用）。其次是 perspective: 600px,元素距离视图的距离，以像素计。 能产生透视效果的一个属性，值越大，它距离我们眼睛的距离就越近（目标外的容器使用）。

 <div class="box-perspective" style="    perspective: 500px;">
        <div class="box-animation hover-aniamtion" style="    transform-style: preserve-3d;">
            <div class="rect rect-front">A</div>
            <div class="rect rect-left">B</div>
            <div class="rect rect-back">C</div>
            <div class="rect rect-right">D</div>
        </div>
    </div>