CSS3学习笔记（5）——transform 的3d变换

最新推荐文章于 2025-05-25 13:28:22 发布

想成为大佬的鸭子

最新推荐文章于 2025-05-25 13:28:22 发布

阅读量760

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： HTML5 CSS3

本文链接：https://blog.youkuaiyun.com/weixin_41309331/article/details/97160252

CSS 专栏收录该内容

11 篇文章

订阅专栏

这篇博客详细介绍了CSS3的3D变换，包括三维移动、缩放和旋转，以及如何利用这些变换实现立方体效果。通过左手原则确定旋转方向，并使用transform-style、perspective和perspective-origin来创建逼真的3D视图。

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

在CSS3中，我们可以用一个三维坐标系来表示一个3d空间：

其中，z轴指向的是屏幕向外。

要实现3d的移动、缩放、旋转，也需要用到 transform样式。

三维移动

transform: translate3d(x, y, z);

其中x、y、z分别表示x、y、z方向上的偏移像素值。

也可以分开写：translateX(x)、translateY(y)、translateZ(z)

三维缩放

transform: scale3d(x, y, z);

其中x、y、z分别表示x、y、z方向上的缩放。缩放值与2d的类似，1不缩放，＜1缩小，＞1放大。

也可以分开写：scaleX(x)、scaleY(y)、scaleZ(z)

三维旋转

transform: rotate3d(x, y, z, angle);

这里的x，y，z决定的（x，y，z）其实就是一个向量，相信稍微学过一点数学的人都能理解。

angle代表角度，取正取负有一个很实用的方法：左手原则，即用左手竖起大拇指，大拇指指向的方向与（x，y，z）向量指向的方向相同，四指环绕的方向即为正方向。

也可以分开写：

rotateX(angle)	围绕X轴旋转
rotateY(angle)	围绕Y轴旋转
rotateZ(angle)	围绕Z轴旋转

立方体案例

transform-style：使被转换的子元素（注意是子元素）保留其3d转换（需设置在父元素中），它有如下两个属性值：

flat	子元素将不保留其 3D 位置-平面方式。
preserve-3d	子元素将保留其 3D 位置—立体方式。

透视、景深效果：

（1）perspective(length) ：为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。例如我要建立一个小立方体，长宽高都是200px。如果我将 perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
（2）perspective-origin：属性规定了镜头在平面上的位置，默认是放在元素的中心。如perspective-origin: 10px 10px; 表示从右下方观察。

根据3d移动和3d旋转，可以很容易的实现一个立方体，实现效果如下图：

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			/* 将立方体旋转一定角度便于观察 */
			transform: rotate3d(1,1,0,30deg);
			/*让子元素保留3d变换之后的效果*/
			transform-style: preserve-3d;
			/* 景深透视效果 */
			perspective: 0px;
			/* 设置景深透视的观察角度 */
			perspective-origin: 0px 0px;
		}
		.box > div{
			width: 200px;
			height: 200px;
			position: absolute;
			opacity: 0.5;
		}
		.front{
			background-color: red;
			transform: translateZ(100px);
		}
		.back{
			background-color: blue;
			transform: translateZ(-100px) rotateX(180deg);
		}
		.left{
			background-color: green;
			transform: translateX(-100px) rotateY(-90deg);
		}
		.right{
			background-color: orange;
			transform: translateX(100px) rotateY(90deg); 
		}
		.top{
			background-color: yellow;
			transform: translateY(-100px) rotateX(90deg);
		}
		.bottom{
			background-color: purple;
			transform: translateY(100px) rotateX(-90deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
	</div>
</body>
</html>