我们生活的环境是 3D 的,特点是近大远小,在物体后面的东西会被遮挡。我们可以用 CSS3 做出 3D 的视觉效果。
1、3D 移动 —— translate3d
之前我们学到的移动是二维的(2D 转换 transform —— 元素的位移、旋转、缩放),3D 移动是在此基础上多了一个移动的方向,也就是 Z 轴。
/* 在 Z 轴向外移动 100px(向我们眼睛的方向) */
transform: translateZ(100px);
/* 分别在 X、Y、Z 轴上移动 100px、50px、100px */
transform: translate3d(100px, 50px, 100px);
需要注意的是,在 X、Y 轴的移动距离可以用像素,也可以用百分比,但 Z 轴移动的距离通常用像素值。
2、透视 —— perspective
我们发现上面的样式虽然用了 translate3d,但依旧是二维效果的。
如果想要产生 3D 效果,需要透视。也就是模拟人视觉的位置去看。
透视也称为视距,视距就是人眼睛到屏幕的距离,距离越近,成像越大,距离越远,成像越小。
透视写在被观察元素的父盒子上面。
perspective: 300px;
这下盒子移动后看着变大了,因为我们在 Z 轴方向向我们移动了 100px,近大远小。
尝试将盒子移远一点,会看到盒子变小了:
/* 在 Z 轴向内移动 100px(往屏幕内方向移动) */
transform: translate3d(100px, 50px, -100px);
3、3D 旋转 —— rotate3d
3D 旋转可以让元素在三维平面内沿着 x轴、y轴、z轴或者自定义轴进行旋转。
关于元素旋转方向,可以记住左手准则:
左手的大拇指指向 x / y / z 的正方向,其余手指弯曲的方向就是该元素旋转的方向(正值)。
/* 沿着 x 轴正方向旋转 45 度 */
transform: rotateX(45deg);
/* 沿着 y 轴正方向旋转 45 度 */
transform: rotateY(45deg);
/* 沿着 z 轴正方向旋转 45 度(其实就是之前的 rotate) */
transform: rotateZ(45deg);
/* 沿着自定义轴旋转,x、y、z 表示旋转轴的矢量,表示是否希望沿着该轴旋转 */
transform: rotate3d(x, y, z, deg);
/* 沿着 x 轴旋转 45 度 */
transform: rotate3d(1, 0, 0, 45deg);
/* 沿着 x、y 轴的对角线旋转 45度 */
transform: rotate3d(1, 1, 0, 45deg);
4、3D 呈现 —— transform-style
transform-style
控制子元素是否开启三维立体环境,需要写给父级的盒子,子级盒子才能呈现 3D 效果。
/* 子元素不开启 3d 立体空间,默认值 */
transform-style: flat;
/* 子元素开启立体空间 */
transform-style: preserve-3d;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。