CSS3 3D转换

目录

前言

一、三维坐标系

二、3D转换

3D转换知识要点：

1.3D 位移：translate3d(x, y, z)

2.3D 旋转：rotate3d(x, y, z)

3.透视：perspctive

4.3D呈现 transfrom-style

总结

---

前言

我们平时生活的环境是3D的，那么如何让3D的东西在2D上呈现呢？照片就是3D物体在2D平面呈现很好的一个例子。
特点：
1、近大远小
2、物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果。

一、三维坐标系

三维坐标系 其实就是指立体空间，立体空间是由三个轴共同组成。
x轴:水平向右 x向右为正 左为负值
Y轴 垂直向下 y向下为正 上为负值
Z轴 垂直屏幕 往外面是正值 往里面是负值。

二、3D转换

3D转换知识要点：

1.3D 位移：translate3d(x, y, z)

在2D的基础上多增加了一个可移动的方向，z轴方向。

语法：

translform:translateX(100px)仅在X轴上移动
translform:translateY(100px)仅在Y轴上移动
translform:translateZ(100px)仅在Z轴上移动
translfotm:translate3d(x,y,z)其中 x、y 、z表示分别要移动的轴的方向的距离。
xyz是不能省略的，如果没有就写0

2.3D 旋转：rotate3d(x, y, z)

语法：
1.transform：rotateX（45deg）：x轴正方向旋转45°
2.transform：rotateY（45deg）：y轴正方向旋转45°
3.transform：rotateZ（45deg）：z轴正方向旋转45°
4.transform：rotate3d（x，y，z，deg）：自定义旋转角度

 示例：

<style>

        img {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            border: 5px solid pink;

            transition: all 2s;

        }

        img:hover {

            transform: rotateX(360deg);

        }

    </style>

 如图所示：

 注意：

rotateX和rotateY都有一个左手准则

rotateX：

• 左手的手拇指指向 x 轴的正方向

• 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

rotateY：

• 左手的拇指指向 y 轴的正方向

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

3.透视：perspctive

1.想要在网页产生3D效果需要透视
2.透视也称为视距：视距就是人的眼睛到屏幕的距离
3.距离视觉点越近的在电脑平面成像越大，越远成像越小
4.透视的单位是像素

透视写在被观察元素的父盒子上面
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

示例：

body {
  perspective: 1000px;
}

4.3D呈现 transfrom-style

1.控制子元素是否开启三维立体环境
2.transform-style：float子元素不开启3d立体空间 默认
3.transform-style：preserve-3d；子元素开启立体空间
4.代码写给父级，但是影响的是子盒子

示例：

这是一个未加3D呈现的盒子：

加入3D呈现：

transform-style: preserve-3d;

结果如图所示：

---

总结

这就是CSS3里面3D转换的一些知识点了，通过本次学习了解了一些关于3D的知识，分享出来仅供大家参考。