CSS3-3D变换 transform-style:preserve-3d

最新推荐文章于 2024-10-08 18:21:13 发布

¡Venceremo

最新推荐文章于 2024-10-08 18:21:13 发布

阅读量1k

点赞数

分类专栏： CSS3 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125825449

版权

CSS3 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

transform属性：在3d上主要是空间上的旋转变化主要是三个维度

rotateX() 角度单位deg 绕轴旋转

rorateY()

rorateZ()

透视：perspective------变换效果像素越小离舞台越近像素越大离舞台越远近大远小的透视效果

内容：是我们需要进行3d变换的（可以有多个）---------------将其放在父容器上

实际上对内容的变换是通过对父容器的变化完成的

父容器设置的属性为：

         transform-style:preserve-3d；要做3d变换

         transform：rorate(30deg) ;在做什么的变换

父容器（可以有多个）放在舞台（一个）上进行表演

舞台设置的属性（观众的观看效果）：透视关系

视角的设置：眼睛到舞台的距离

        perspective：100px 像素越小离舞台越近

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<style type="text/css">
		.stage{
			width: 900px;
			height: 250px;
			perspective: 100px; /*人眼距离舞台的距离*/

		}
		.box{ /*父容器的大小根据图片设定*/
			width: 300px;
			height: 250px;
			float: left; /*让盒子排列在一排*/
			transition: linear 1s; /*有渐进的效果*/
			transform-style:preserve-3d;/*父容器设置为3d变换*/
		}
		img{
			width: 300px;
			height: 250px;
		}
		/*变换作用的是父容器*/
		.x:hover{
			transform: rotateX(60deg);

		}
		.y:hover{
			transform: rotateY(60deg);
		}
		.z:hover{
			transform: rotateZ(60deg);
		}
		</style>
		
	</head>

	<body>
		<div class="stage"> <!-- 舞台 -->
			<div class="box x"> <!-- 父容器1 class属性引用多个类别的样式-->
				<img src="images/3.jpg" alt="内容"><!-- 变换的内容 -->
			</div>
			<div class="box y"><!-- 父容器2 -->
				<img src="images/3.jpg" alt="内容"><
			</div>
			<div class="box z"><!-- 父容器3 -->
				<img src="images/3.jpg" alt="内容"><
			</div>
		</div>
	</body>

</html>