这是我参与 8 月更文挑战的第 20 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

9.2.3 3D 转换

在上一节中，我们已经学习了 2D 转换，主要包括如何让元素在平面上进行顺时针或逆时针旋转。其实，在 3D 变形中可以让元素围绕X轴、Y轴、Z轴进行旋转，下面将针对 CSS3 中的 rotateX()、 rotateY() 函数进行具体讲解。

1. rotateX() 方法

rotateX() 函数用于指定元素围绕 X 轴旋转，其基本语法格式如下：

transform: rotateX(a);

在上述语法格式中，参数 a 用于定义旋转的角度值，单位为 deg，其值可以是正数也可以是负数。如果值为正，元素将围绕 X 轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

案例：演示 rotateX() 函数的使用，

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>rotateX() 函数</title>
		
		<style type="text/css">
			
			div {
				width: 100px;
				height: 50px;
				background-color: #FF0;
				border: 1px solid black;
			}
			
			#div2 {
				transform: rotate(45deg); /* (1) */
				/* 元素围绕 x 轴旋转 */
				
				-ms-transform: rotateX(45deg);
				/*IE9浏览器兼容代码*/
				-webkit-transform: rotateX(45deg)
				/* Safari and Chrome 浏览器兼容代码 */
				-moz-transform: rotateX(45deg);
				/* Firefox 浏览器兼容代码*/
				-o-transform: rotateX(45deg); 
				/* Opera 浏览器兼容代码*/ /* (2) */
			}
			
		</style>
		
	</head>
	<body>		
		
		<div>元素原来的位置</div>
		<div id="div2">元素旋转后的位置</div>
		
	</body>
</html>

元素将围绕X轴顺时针旋转45°，
在这里插入图片描述

2. rotateY () 方法

rotateY() 函数指定一个元素围绕 Y 轴旋转，其基本语法格式如下：

transform: rotateY(a);

在上述语法中，参数 a 与 rotateX(a) 中的 a 含义相同，用于定义旋转的角度。如果值为正，元素围绕 Y 轴顺时针旋转；反之，如果值为负，元素围绕 Y 轴逆时针旋转。

案例：在上个案例的基础上演示元素围绕Y轴旋转的效果。将上个案例中的第 (1) ~ (2) 行代码改为：

transform: rotateY(45deg);
/*元素按照Y轴旋转*/
-ms-transform: rotateY(45deg);
/*IE9 浏览器兼容代码*/
-webkit-transform: rotateY(45deg); 
/*Safari and Chrome 浏览器兼容代码*/
-moz-transform: rotateY(45deg) 
/*Firefox 浏览器兼容代码*/
-o-transform: rotateY(45deg);
/*Opera 浏览器兼容代码*/

在这里插入图片描述

注意:
_
rotateZ() 函数和 rotateX() 函数、rotateY() 函数功能一样，区别在于 rotateZ() 函数用于指定一个元素围绕乙轴旋转。如果仅从视觉角度上看，rotateZ() 函数让元素顺时针或逆时针旋转，与 rotate() 效果等同，但它不是在 2D 平面上的旋转。

3. rotate3D() 方法

在三维空间里，除了 rotateX()、rotateY() 和 rotateZ() 函数可以让元素在三维空间中旋转之外，还有一个 rotate3D() 函数。在 3D 空间，三个维度也就是三个坐标，即长、宽、高。轴的旋转是围绕一个 [x, y, z] 向量并经过元素原点。其基本语法如下：

rotate3d(x, Y, Z, angle);

在上述语法格式中，各参数属性值的取值说明如下：

x：代表横向坐标位移向量的长度。
y：代表纵向坐标位移向量的长度。
z：代表 Z 轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值。
angle：角度值，主要用来指定元素在 3D 空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。

需要说明的是，在 CSS3 中包含很多转换的属性，通过这些属性可以设置不同的转换效果。

转换的属性

属性名称	描述
transform	向元素应用 2D 或 3D 转换
transform-origin	允许改变被转换元素的位置
transform-style	规定被嵌套元素如何在3D空间中显示
perspective	规定 3D 元素的透视效果
perspective-origin	规定 3D 元素的底部位置
backface-visibility	定义元素在不面对屏幕时是否可见

再探究

转换的方法

方法名称	描述
matrix3d(n,n,n,n, n,n,n,n, n,n,n,n, n,n,n,n)	定义 3D 转换，使用16个值的4×4矩阵
translate3d(x,y,z)	定义 3D 转换
translateX(x)	定义 3D 转换，仅使用用于X轴的值
translateY(y)	定义 3D 转换，仅使用用于Y轴的值
ranslateZ(z)	定义 3D 转换，仅使用于Z轴的值
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值
rotate3d(x, y, z, angle)	定义 3D 旋转
rotateX(angle)	定义沿 X 轴的 3D 旋转
rotateY(angle)	定义沿 Y 轴的 3D 旋转
rotateZ(angle)	定义沿 Z 轴的 3D 旋转
perspective(n)	定义 3D 转换元素的透视视图

案例：演示转换的属性和方法的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>translate3D() 方法</title>
<style type="text/css">

div {
width: 200px;
height: 200px;
margin: 50px auto;
border: 5px solid #000;
position: relative;
perspective: 50000px;
/*规定 3D 元素的透视效果*/
-ms-perspective: 50000px;
/* IE9 浏览器兼容代码*/
-webkit-perspective: 50000px;
/*Safari and Chrome 浏览器兼容代码*/
-moz-perspective: 50000px;
/* Firefox 浏览器兼容代码*/
-o-perspective: 50000px;
/*Opera 浏览器兼容代码*/
transform-style: preserve-3d;
/*规定被嵌套元素如何在3D空间中显示*/
-ms-transform-style: preserve-3d;
 /*IE9浏览器兼容代码*/
-webkit-transform-style: preserve-3d;
/*Safari and Chrome 器兼容代码*/
-moz-transform-style: preserve-3d;
/*Firefox浏览器兼容代码*/
-o-transform-style: preserve-3d;
/*Opera浏览器兼容代码*/
transition: all is ease 0s;
/*设置过渡效果*/
-webkit-transition: all 1s ease 0s; 
/*Safari and Chrome 浏览器兼容代码*/
-moz-transition: all 1s ease 0s;
/*Firefox 浏览器兼容代码*/
-o-transition: all 1s ease 0s;
/*Opera浏览器兼容代码*/

div:hover {
transform: rotateX(-90deg);
/*设置旋转角度*/
-ms-transform: rotateX(-90deg);
/*IE9 浏览器兼容代码*/
-webkit-transform: rotateX(-90deg); 
/*Safari and Chrome 浏览器兼容代码*/
-moz-transform: rotatex(-90deg);
/*Firefox 浏览器兼容代码*/
-o-transform: rotateX(-90deg);
/*Opera浏览器兼容代码*/
}

div img {
position: absolute;
top: 0;
left: 0;
}

div img.nol {
transform: translateZ(100px);
/*设置旋转轴*/
-ms-transform: rotateZ(100px);
/*IE9浏览器兼容代码*/
-webkit-transform: rotateZ(100px); 
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: rotateZ(100px);
/*Firefox浏览器兼容代码*/
-o-transform: rotateZ(100px); 
/*Opera浏览器兼容代码*/
z-index: 2;
}

div img.no2 {
transform: rotateX(90deg) translateZ(100px);
/*设置旋转轴和旋转角度*/
-ms-transform: rotateX(90deg) translateZ(100px); 
/*IE9 浏览器兼容代码*/
-webkit-transform: rotateX(90deg) translate2(100px); /*Safari and Chrome 浏览器兼容代码*/
-moz-transform: rotateX(90deg) translateZ(100px); /*Firefox 浏览器兼容代码*/
-o-transform: rotateX(90deg) translate(100px); 
/*Opera 浏览器兼容代码*/
}

</style>
</head>
<body>

<div>
<img class="nol" src="#" alt="1">
<img class="no2" src="#" alt="2">
</div>

</body>
</html>

在这里插入图片描述

在上述案例中，通过 perspective 属性规定 3D 元素的透视效果，transform-style 属性规定元素在 3D 空间中的显示方式，并且分别针对 < div> 和 < img> 设置不同的旋转轴旋转角度。

鼠标移上时，< div> 将沿着 X 轴逆时针旋转90°，

今日入门学习暂时告一段落

Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）