简单正方体的3d旋转

最新推荐文章于 2022-05-17 22:12:51 发布

「已注销」

最新推荐文章于 2022-05-17 22:12:51 发布

阅读量5.2k

点赞数 8

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44595744/article/details/102728576

版权

本文介绍了如何创建并实现3D旋转的正方体模型。首先通过代码搭建正方体，通过调整perspective值观察不同角度。接着展示使正方体围绕x、y、z轴转动的代码及动画效果，以及围绕两个轴转动的示例，帮助理解旋转原理。最后，作者鼓励读者尝试制作更复杂的3D动画。

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

简单正方体的3d旋转

1.首先搭建正方体模型

代码如下：

body {
        /* 透视：没有透视不能看到3d效果 */
        perspective: 1200px;
    }
    .content{
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;
        top: 200px;
        left: 300px;
        animation: rotate1 3s linear infinite;
        transform-style: preserve-3d;

    }
    .box {
        width: 200px;
        height: 200px;
        position: absolute;
        opacity: 0.5;
    }

    .red {
        /* 前 */
        background-color: red;
        transform: translate3d(0px, 0px, 100px);
    }

    .yellow {
        /* 上 */
        background-color: yellow;
        transform: rotateX(90deg) translate3d(0px, 0px, 100px);
    }

    .blue {
        /* 左 */
        background-color: blue;
        transform: rotateY(-90deg) translate3d(0px, 0px, 100px);
    }

    .pink {
        /* 下 */
        background-color: pink;
        transform: rotateX(-90deg) translate3d(0px, 0px, 100px)
    }

    .green {
        /* 右 */
        background-color: green;
        transform: rotateY(90deg) translate3d(0px, 0px, 100px);
    }

    .orange {
        /* 后 */
        background-color: orange;
        transform: translate3d(0px, 0px, -100px);
    }
}

<body>
    <div class

最低0.47元/天解锁文章

「已注销」

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
简单正方体的3d旋转

简单正方体的3d旋转1.首先搭建正方体模型代码如下：body { /* 透视：没有透视不能看到3d效果 */ perspective: 1200px; } .content{ display: inline-block; position: relative; width: 200px; ...
复制链接

扫一扫

专栏目录