淘先锋技术网

首页 1 2 3 4 5 6 7

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

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

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

        rorateY()

        rorateZ()

 

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

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

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

父容器设置的属性为：

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

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

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

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

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

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

<!DOCTYPE html>
<html >
	<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>