CSS3 3D转换

最新推荐文章于 2024-08-24 06:11:04 发布

原创最新推荐文章于 2024-08-24 06:11:04 发布 · 447 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

前端专栏收录该内容

52 篇文章

订阅专栏

CSS3 3D转换

1、认识3D

CSS3 允许使用 3D 转换对元素进行格式化。我们生活中的环境是3D的，照片就是3D物体在2D平面呈现的例子。

1.1 3D的特点

近大远小
物体后面遮挡不可见
当我们在网页上构建 3D 效果效果的时候参照这些特点久能产出3D效果

1.2 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由三个轴共同组成的。

x轴：水平向右——注意：右边是正值，左边的负值
y轴：垂直向下——注意：下面是正值，上面是负值
z轴：垂直屏幕——注意：往外是正值，往里是负值

在这里插入图片描述

2、3D 转换

3D位移：translate3d;
3D旋转：rotate3d
3D透视：perspctive
3D呈现：transform-style

3、3D 移动

3D移动就是在2D移动的基础上多加了一个可以移动的方向，即：Z轴方向
transform: translateX(100px);仅仅是在X轴上移动
transform: translateY(100px);仅仅是在Y轴上移动
transform: translateZ(100px);仅仅是在Z轴上移动
transform: translate3d(x, y, z);其中x、y、z分别指要移动的轴的方向的距离
注意：x、y、z 对应的值不能省略，不需要填写用 0 进行补充

语法：
```
transform: translate3d(x, y ,z);
```

4、3D透视

如果想要网页产生3D效果需要透视，我们可以理解成3D物体投影在2D平面上
实际上模仿人类的视觉位置，可视为安排一个眼睛去看
透视也称视距，所谓视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素px

知识要点：

透视需要写在被视察元素的父盒子上面
注意下方图片
- d：就是视距，视距就是指人的眼睛到屏幕之间的距离
- z：就是z轴，z轴越大(正值)，我们看到的物体就越大

在这里插入图片描述

body {
	perspective:1000px;
}

translateZ与perspective的区别:

perspective是给父级进行设置的，而translateZ是给子元素进行设置不同的大小。

5、3D旋转

3D旋转指：可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。

我们在平面中使用的旋转只是单纯的让元素在平面旋转一定的角度，在三维旋转中稍微要复杂一些，属性当然还是我们使用的transform。三维旋转有下面三个函数分别对应三个维度的旋转：

transform: rotateX(45deg)：沿着x轴正方向旋转45°
transform: rotateY(45deg)：沿着y轴正方向旋转45°
transform: rotateZ(45deg)：沿着z轴正方向旋转45°
transform: rotate3d(x, y, z, 45deg)：沿着自定义轴旋转45°

5.1 rotateX

rotateX是让元素绕着x轴旋转，角度越大，元素绕着x轴顺时针旋转，类似于我们的单杠运动。

在这里插入图片描述

左手准则：

左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向(正值)

5.2 rotateY

rotateY是让元素绕着y轴旋转，角度越大，元素绕着y轴顺时针旋转，类似于钢管舞运动…

在这里插入图片描述

左手准则：

左手的拇指指向y轴的正方向
其余的手指弯曲方向就是该元素沿着y轴旋转的方向(正值)

5.3 rotateZ

rotateZ是让元素绕着z轴旋转，角度越大，元素绕着z轴顺时针旋转，这就是我们在二维平面的旋转，类似于转盘…

在这里插入图片描述

5.4 rotate3d

transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转，deg为角度
x、y、z表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，deg标识旋转的角度

transform: rotate3d(1, 1, 0, 45deg);
/*沿着对角线旋转45°*/
transform: rotate3d(1, 0, 0, 45deg);
/*沿着x轴旋转45°*/

6、3D呈现

transform-style

控制子元素是否开启三维立体环境
transform-style: flat;代表子元素不开启3D立体空间，默认的
transform-style: preserve-3d;子元素开启3D立体空间
代码写给父级，但影响的是子盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转</title>
    <style>
        body {
            /* 开启透视 */
            perspective: 100px;
            /* 子元素开启三维空间 */
            transform-style: preserve-3d;
        }
        
        div {
            position: absolue;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            transition: all 1s;
        }
        
        div:hover {
            transform: rotate3d(1, 1, 0, 180deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>