CSS3-3D变换

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度。

相关推荐
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter