正方体旋转动画（2个小例子）

最新推荐文章于 2021-09-17 14:51:04 发布

CQ_天道酬勤

最新推荐文章于 2021-09-17 14:51:04 发布

阅读量2.4k

点赞数

分类专栏：前端笔记 3d旋转动画文章标签：立体旋转动画

本文链接：https://blog.csdn.net/qq_35396397/article/details/102715585

版权

本文介绍了如何实现正方体旋转动画的两个实例。第一个例子通过组合div形成正方体，并利用旋转和平移设定3D效果。通过设置父容器的perspective属性实现立体感，调整旋转角度实现不同轴向的旋转。第二个例子则通过改变父容器的旋转，而非单独旋转每个面。为了避免面在旋转时重叠，每个面还需沿自身前方适当位移。文章附带了实际效果展示。

摘要由CSDN通过智能技术生成

正方体旋转动画

设置原理：
第一个例子：1.用div先写出六个面
2.通过旋转、平移方式将六个面组成正方体
3.将父容器设成perspective透视，无透视，不3d
4.设置立体旋转方向（要搞清楚绕着哪个轴旋转）
此处旋转角度为90deg
第二个例子：
立体设置同上，主要是把父容器旋转，而不是分别将面旋转。

另外：当面进行旋转的时候，他们会挤在一起，所以需要让每个面都要向他自身的前面走几步（假设为r，计算公式为如下图）
在这里插入图片描述

将容器设为透视

body{
   
        perspective: 1200px;
        transform-style: preserve-3d;
    }

 .box{
   
        width: 200px;
        height: 200px;
        position: absolute;
        top: 300px;
        left: 500px;
        opacity: 0.5;
    }
    //分别设置六个面，并将其旋转，平移
    .red{
   
        /* 前 */
        background-color: red;
        transform: translate3d(0px,0px,100px);
        animation: box_red 2s linear infinite;
    }
    .yellow{
   
        /* 上 */
        background-color: yellow;
        transform: translate3d(0px,0px,100px);
        animation: box_yellow 2s linear infinite;
    }
    .blue{
   
        /* 左 */
        background-color: blue;
        /* transform: rotateY(90deg) translate3d(0px,0px,-100px); */
        transform:translate3d(0px,0px,-100px);
        animation: box_blue 2s linear infinite;
    }
    .green{
   
        /* 右 */
        background-color: green;
        /* transform: rotateY(-90deg) translate3d(0px,0px,-100px); */
        transform: translate3d(0px,0px,-100px);
        animation: box_green 2s linear infinite;
    }
    .black{
   
        /* 下 */
        background-color: black;
        /* transform: rotateX(-90deg) translate3d(0px,0px,100px); */
        transform: translate3d(