CSS3-3D变换

发布时间：2023年12月27日

3D变换

空间与景深

首先要开启3D空间 transform-style:preserve-3d，在父容器中开启

做2D变换的时候，2D 空间也是要先开启

景深表示要观察的图像距离观察者所在的距离

开启3D空间

重要原则: 元素进行 3D 变换的首要操作: 父元素必须开启 3D 空间!

使用 transform-style 开启 3D 空间，可选值如下:

flat : 让子元素位于此元素的二维平面内(2D 空间) -- 默认值。

preserve-3d : 让子元素位于此元素的三维空间内 (3D 空间)

设置景深

何为景深?-- 指定观察者与z=0平面的距离，能让发生 3D 变换的元素，产生透视效果，看起来更加立体

使用 perspective 设置景深，可选值如下:

none : 不指定透视 -- (默认值)

长度值 : 指定观察者距离z=0平面的距离，不允许负值

注意: perspective 设置给发生 3D 变换元案的父元案!

透视点就是观察者所在的位置

透视点位置

3.透视点位置

所谓透视点位置，就是观察者位置;默认的透视点在元素的中心。

使用 perspective-origin 设置观察者位置 (透视点的位置)，例如:

/*相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素)*/

perspective-origin: 400px ?300px;

注意:通常情况下，我们不需要调整透视点位置

代码：

在父元素中进行设置

/*开启3D空间*/

transform-style:preserve-3d;

/*设置景深，有了透视效果（近大远小）*/

perspective:500px;

/*设置透视点的位置*/

perspective-origin:102px 102p; /*相对坐标轴往右偏移400px， 往下偏移300px*/

Z轴的数字不可以写百分比

3D 位移

3D 位移是在 2D 位移的基上，可以让元素沿 Z轴位移，具体使用方式如下:

1先给元素添加 转换属性 transform

2编写 transform 的具体值，3D 相关可选值如下:

translateZ 设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比.

translate3d 第1个参数对应x轴，第2个参数对应y 轴，第3个参数对应Z轴，均不能省略

scaleZ表示景深，是要观察的图像距离观察者的距离

6.3D 缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下:

1.先给元素添加 转换属性 transform

2.编写transform 的具体值，3D 相关可选值如下:

scaleZ用来调整设置景深

scaleZ设置 z 轴方向的缩放比例，值为一个数字，1 表示不缩放，大于1 放大，小于 1 缩小。

scale3d第1个参数对应 x轴，第2个参数对应 y 轴，第3个参数对应 ，参数不允许省略。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>
			.outer{
				width:400px;
				height:400px;
				border:1px solid black;
				margin:0 auto;
				margin-top:100px;
				/*开启3D空间*/
				transform-style:preserve-3d;
				/*设置景深（有了透视效果，近大远小*/
				perspective:500px;
				/*设置透视点位置*/
				perspective-origin:102px 102px;
			}
			.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform:rotateY(45deg);
			}
		</style>

		<body>
			<div class="outer">
				<div class="inner">您好啊</div>
			</div>
		</body>

</html>


.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform:scale(4)rotateY(45deg);  /*500/4*/
			}

.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform:rotateY(180deg);  
			}

.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform:rotateY(0deg);  
				backface-visibility:hidden;/*背部不可见*/
			}

正数表示顺时针旋转，负数表示逆时针旋转
.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform-origin:202px 202px; /*绕着下方的横线旋转，X轴*/
				transform:rotateX(-45deg);
}


rotateX是沿水平轴旋转，rotateY是沿垂直轴旋转（下面值的设定决定是按哪个轴旋转）


/*沿着横向的线条旋转*/
.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform-origin:202px 0px;
 				transform:rotateX(-45deg);
				
			}

.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
				transform-origin:0px 202px; /*绕着下方的横线旋转，X轴*/
				transform:rotateX(-45deg);
				
	}

.inner{

width:200px;

height:200px;

background-image: linear-gradient(45deg,blue,pink);

/*左边的值为0绕着左边的值旋转，等左边的值不为0，右边的值为宽度值的时候绕着右边的值旋转*/

transform-origin:0px 202px;

transform:rotateY(-45deg);

}

最后旋转可以降低难度，

多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: transletez(10Bpx) scalez(3) rotateY(4edeg):

注意点:多重变换时，建议最后旋转

3d旋转

.inner{
				width:200px;
				height:200px;
				background-image: linear-gradient(45deg,blue,pink);
			/*绕着x,y,z轴都旋转45度*/
				transform:rotate3d(1,1,1,45deg);
			}

3D 旋转

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和y 轴旋转，具体使用方式如下:

1.先给元素添加 转换属性 transform

2编写 transform 的具体值，3D 相关可选值如下:

rotatex ???设置 x 轴旋转角度，需指定一个角度值( deg)，面对 x 轴正方向: 正值顺时针，负值逆时针。

rotateY ???设置y 轴旋转角度，需指定一个角度值( deg)，面对y 轴正方向: 正值顺时针，负值逆时针。

rotate3d ??前 3 个参数分别表示坐标轴: x,y,z，第 4 个参数表示旋转的角度，参数不允许省略。例如: transform: rotate3d(1,1,1,30deg)，意思是: x、y、z 分别施转30度。

文章来源:https://blog.csdn.net/JLY19970726/article/details/135223156
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章