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

来源：互联网发布：知达常青藤中学怎么样编辑：程序博客网时间：2024/05/21 14:55

这里写图片描述
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>

1 1

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

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