初学css3做旋转立方体

原创已于 2024-04-16 16:33:59 修改 · 284 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2020-01-15 21:48:23 首次发布

笔记专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的transform属性实现一个3D立方体的动画效果，包括旋转轴的设定、旋转角度的控制以及动画的循环播放。通过具体的代码示例，读者可以学习到如何设置perspective、transform-origin和@keyframes等关键属性，从而创建出具有深度感的动态三维视觉体验。

    <style>
    //   *{景深perspective表示眼睛到屏幕之间的距离}
       body{
            perspective: 800px;
        }
        .con {
            position: relative;
            width: 200px;

            height: 200px;
            

            margin: 200px auto;
           

            line-height: 200px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            transform-style: preserve-3d;
            animation: move 5s linear infinite;
            transform-origin: center center 100px;
        }

        .con>div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.4;
            }
        //*{rotate3d(x,y,z,deg)中的x、y、z的取值可以为任意值（包括小数），其实它们就是x轴、y轴、z轴上的坐标值，三个值就可以唯一确定一个3D空间的点，然后从原点到这个点连接一条直线就是旋转轴，deg则是元素沿着这个旋转轴旋转的角度}

        @keyframes move {
            from {
                transform: rotate3d(3,2,1,0deg);
            }

            to {
                transform: rotate3d(3,2,1,360deg);
            }
        }


        .one {
            background-color: red;

        }

        .two {
            background-color: blue;
            transform-origin: left;
            transform: translatex(200px) rotatey(-90deg);

        }

        .three {
            background-color: brown;
            transform-origin: right;
            transform: translatex(-200px) rotateY(90deg);

        }

        .four {
            background-color: green;
            transform-origin: bottom;
            transform: translatey(-200px) rotateX(-90deg);

        }

        .five {
            background-color: purple;
            transform-origin: top;
            transform: translatey(200px) rotateX(90deg);

        }

        .six {
            background-color: yellow;

            transform: translateZ(200px);


        }
    </style>


    <div class="con">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
    </div>