CSS3-3D变换

2023-12-26 17:11:23

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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。