基于css3的3D立方体旋转特效 (先translate与先rotate的不同)

这里写图片描述
3D变换基于几个比较重要的属性,perspective,translateZ,preserve-3d;
格式:
舞台(perspective)
容器(3D, preserve-3d)
内容

3D实现立方体盒子:
这里写图片描述

这里写图片描述

transform的4个属性,排序不同,带来的效果也不同。
先移动的代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>3d</title>
    <style>
        *{padding: 0;margin: 0;}

        ul,li{list-style: none;}

        html{
            height: 100%;
            background: #ff0;
        }

        div{
            perspective: 1000px;
        }

        ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            transform: rotateX(30deg) rotateY(30deg);
            animation: rotate 18s infinite linear; 
        }

        @keyframes rotate{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #fff;
            background: #333;
            opacity: 0.6;
        }

        ul .front{
            transform: translateZ(100px);
        }

        ul .back{
            transform:translateZ(-100px)  rotateY(180deg);
        }

        ul .left{
            transform: translateX(-100px) rotateY(-90deg) ;
        }

        ul .right{
            transform:translateX(100px)  rotateY(90deg) ;
        }

        ul .top{
            transform: translateY(-100px) rotateX(90deg) ;
        }

        ul .bottom{
            transform: translateY(100px) rotateX(-90deg) ;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="front"></li>
            <li class="back"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="top"></li>
            <li class="bottom"></li>
        </ul>
    </div>
</body>
</html>

先旋转后移动,坐标轴改变方向。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>3d</title>
    <style>
        *{padding: 0;margin: 0;}

        ul,li{list-style: none;}

        html{
            height: 100%;
            background: #ff0;
        }

        div{
            perspective: 1000px;
        }

        ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            transform: rotateX(30deg) rotateY(30deg);
            animation: rotate 18s infinite linear; 
        }

        @keyframes rotate{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #fff;
            background: #333;
            opacity: 0.6;
        }

        .front{
            transform: translateZ(100px);
        }

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

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

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

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

        .bottom{
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="front"></li>
            <li class="back"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="top"></li>
            <li class="bottom"></li>
        </ul>
    </div>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页