【45】CSS3 （4）——新增属性③3D 转换

倏存

已于 2022-07-12 21:36:20 修改

阅读量1k

点赞数 3

分类专栏：前端基础文章标签： css3 原力计划

于 2021-04-09 17:48:10 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115495555

版权

3D 转换

transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成的平面效果多了一条 z 轴，如下图：
本文目录如下：

一、透视属性

1.应用背景：

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
透视特点：近大远小。
注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化，则设置透视效果。

2.透视属性 perspective

属性名：perspective
作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值：像素值；
数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。（一般设置1000px以上）
注意：透视属性需要设置给 3D 变化元素的父级。

二、3D 旋转

3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：

属性值	说明
`rotateX(angle)`	定义沿着 X 轴的 3D 旋转
`rotateY(angle)`	定义沿着 Y 轴的 3D 旋转
`rotateZ(angle)`	定义沿着 Z 轴的 3D 旋转

注意：属性值的角度区分正负；
正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。

1.1 举例(3D 旋转-`rotateX(angle)`)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.1 举例(3D 旋转-rotateX(angle))</title>
	<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		.box{
     
			width: 250px;
			height: 200px;
			border: 1px solid red;
			margin: 50px;
            perspective: 1000px;  /* 透视，设置给3D变化元素的父级 */
		}
		.box img{
     
		    width: 250px;
		    height: 200px;
            transition: all 1s ease; /*过渡属性，让动画运动方式可控 */
		}
         .box img:hover {
       /*鼠标悬浮则沿X轴顺时针旋转60deg */
             transform: rotateX(60deg);
        }
	</style>
</head>