3D空间旋转

最新推荐文章于 2024-11-19 16:54:31 发布

原创最新推荐文章于 2024-11-19 16:54:31 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

文章介绍了CSS3中的3D转换技术，包括3D位移、透视效果以及3D旋转（rotateX和rotateY），并详细阐述了左手法则在理解旋转方向上的应用。此外，还讨论了如何创建和调用CSS3动画，以及动画的各种属性如无限循环、动画方向等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，空间转换3D

3d坐标系比2d多了个Z轴

一定要记住3个坐标轴取值的正反

X 轴往右越大，是正值，否则反之

Y 轴往下越大，是正值，否则反之

Z轴（指向我们）越大，是正值，否则反之

3D位移的完整写法：

transform:translated3d(x,y,z);

分开写：

transform: translateX(100px);

transform: translateY(100px);

transform: translateZ(100px);

透视

透视的作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果

（perspective:800px）

注意事项：

取值范围一般在800-1200px之间

一定要给父亲元素添加

透视距离也成为视距（人眼到屏幕的距离）

其中d为透视的距离

z是translatez的距离，这个距离靠近我们，盒子越大

3D旋转

rotateX

类似单杠旋转

（默认的旋转中心是在盒子的中心位置）

body {
     /* 父级添加透视 */
     perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateX(360deg);
}

效果展示：

rotateY

类似钢管舞

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

效果如下：

左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向

大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

transform-style: preserve-3d;

二、动画

数据在网络上是以很小的称为帧（Frame）的单位传输的，帧由几部分组成，不同的部分执行不同的功能

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

定义：

/* 1. 定义的动画 */
@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或者是

/* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

调用：

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

动画名字参照css类选择器命名

动画时长和延迟时间别忘了带单位 s

infinate 无限循环动画（重复次数）

alternate 为反向就是左右来回执行动画（跑马灯）

forwards 动画结束停留在最后一帧状态，不循环状态使用

linear 让动画匀速执行

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */animation: run 1s steps(12) infinite, move 5s linear forwards;