博客

用css编写一个简单的旋转魔方

  • Post author:
  • Post category:其他


其实这个就是对CSS3 transform 属性animation属性的一个简单的应用，在网页平面中创建6个面（div），让这6个面匀速的不停的旋转，要创造出来一个3d的感觉，在一个2维的网页平面上，你觉得应该怎么做呢？最直接的就是让它们在Z轴上有东西。下面这6张图片，是我随便找的狐妖小红娘中的图片，大小不是200px 200px的，我在图片属性上加了点东西，效果还不错。

代码： 

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>旋转魔方test</title>
        <link rel="icon" href="img/qisui.ico">
        <style type="text/css">
            html {
                perspective: 888px; /*设置元素被查看位置的视图： 设置了这个才有后面的3d效果*/
            }

            .club-wrapper {
                width: 200px;
                height: 200px;
                /*background-color: #f10215;*/
                /*开启它的相对定位 让它的子元素参照它 绝对定位*/
                position: relative;
                margin: 333px auto;
                /*设置3d变形效果*/
                transform-style: preserve-3d;
                animation: run 15s infinite linear;
            }

            /*设置club-wrapper下的所有的div的样式 给他们宽度和透明效果*/
            .club-wrapper > div {
                width: 200px;
                height: 200px;
                opacity: 0.7;
                position: absolute;
            }

            img {
                vertical-align: top;
                width: 200px;
                height: 200px;
                background-size: contain;
            }

            /*创建关键帧 */
            @keyframes run {
                from {
                    transform: rotateX(0) rotateZ(0);
                }
                to {
                    transform: rotateX(1turn) rotateZ(1turn);
                }
            }

            /*设置6个面的旋转  自己想象一下 空间中有6个面 这六个面最初都是贴在网页平面的 然后经过变幻 到6个位置*/
            .box1 {
                transform: rotateY(90deg) translateZ(100px);
            }

            .box2 {
                transform: rotateY(-90deg) translateZ(100px);
            }

            .box3 {
                transform: rotateX(90deg) translateZ(100px);
            }

            .box4 {
                transform: rotateX(-90deg) translateZ(100px);
            }

            .box5 {
                transform: rotateY(180deg) translateZ(100px);
            }

            .box6 {
                transform: rotateY(0deg) translateZ(100px);
            }

        </style>
    </head>
    <body>
        <!--创建一个外层的容器-->
        <div class="club-wrapper">
            <div class="box1">
                <img src="img/111.jpg">
            </div>
            <div class="box2">
                <img src="img/222.jpg">
            </div>
            <div class="box3">
                <img src="img/333.jpg">
            </div>
            <div class="box4">
                <img src="img/444.jpg">
            </div>
            <div class="box5">
                <img src="img/555.jpg">
            </div>
            <div class="box6">
                <img src="img/666.jpg">
            </div>
        </div>
    </body>
</html>

效果：

点我

（服务器没过期之前可以看）

gif图片展示：

在这里插入图片描述


版权声明：本文为qq_43612538原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。