transform 3d学习&简单示例

啊啊啊～～2025-03-29 8:19

平移：transform: tranlateX(x) | tranlateY(y) | translateZ(z) | translate3d(x, y, z);
比例：transform: scaleX(x) | scaleY(y) | scaleZ(z) | scale3d(x, y, z);
旋转：transform: rotateX(1) | rotateY(1) | rotateZ(1) | rotate3d(1, 1, 1, 45deg);
函数写法，以上都可以写成下面这种形式：transform: matrix3d(...);
transform-style: preserve-3d;
父元素必须设置该属性才能开启3d空间
perspective: 1000px;
透视距离。表示人眼到屏幕的距离，值越小，图越大

示例写3d旋转

css 复制代码

 <div className={styles.box}>
       <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
    </div>

css 复制代码

.box {
    position: relative;
    width: 500px;
    height: 300px;
    transform-style: preserve-3d;
    /* background: #eee; */
    /* perspective: 1000px; */ 
    animation: move 10s linear infinite;
    animation-play-state: paused;
    transform: rotateX(60deg);
}

.box:hover {
    animation-play-state: running;
}

.li {
    list-style: none;
    width: 100px;
    height: 200px;
    position: absolute;
    left: 200px;
    top: 50px;
    box-shadow: 0 0 10px 0 #fff;
}

.li:nth-child(1){
    background: red;
    transform: rotateY(0deg) translateZ(100px);
}
.li:nth-child(2){
    background: orange;
    transform: rotateY(60deg) translateZ(100px);
}
.li:nth-child(3){
    background: blue;
    transform: rotateY(120deg) translateZ(100px);
}
.li:nth-child(4){
    background: green;
    transform: rotateY(180deg) translateZ(100px);
}
.li:nth-child(5){
    background: yellow;
    transform: rotateY(240deg) translateZ(100px);
}
.li:nth-child(6){
    background: purple;
    transform: rotateY(300deg) translateZ(100px);
}

@keyframes move {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

效果