CSS3——3D变换

时间 2020-01-20 标签 css3 css 3 3d 3 d 变换

CSS3中的3D变换主要是实现一些3维的旋转，相对于2D旋转，3D旋转多了一个z轴方向的变化，同时为了达到一种视觉效果，3D变换又不是简单的旋转，他还能够设置人眼到平面的距离，透视等等，从而让图像立起来。在用transform属性变换时咱们要告诉编译器进行的是3D变换而不是2D，因此要加上一行transform-style：preserve-3d；css

1.transform：rotateX（）
一个元素能够设置绕着直角坐标系的某一个轴进行旋转
transform：rotateX（） x轴方向的旋转
transform：rotateY（） y轴方向的旋转
transform：rotateZ（） z轴方向的旋转
单位deg，角度制.
注意：逆着坐标轴的方向看过去的旋转。
html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS33D变换</title>
	<style type="text/css"> *{ padding: 0; margin: 0; } #container{ background-color: rgb(97,119,176); height: 1000px; width: 1200px; /*perspective: 1000px;*/ } #main{ height: 500px; width: 500px; margin: auto; position: relative; top: 200px; transform-style: preserve-3d; transition: 1s linear; } #main:hover{ transform:rotateY(60deg); } </style>
</head>
<body>
	<div id="container">
		<div id="main">
			<img src="images/Android.png">
		</div>
	</div>
</body>
</html>

2.transform：translateX(px)；平移属性：ios

translateX(px)
translateY(px)
translateZ(px)
沿着X，Y，Z方向平移px个像素单位。web

3.透视属性perspectivesvg

对于2D变换，没有透视关系，只有一个简单的平面旋转，而对于3D变换咱们能够设置透视属性，达到近大远小的视觉效果。spa

perspective：100px;3d

值得注意的是 perspective的值越大表示视距越远，透视效果越弱，反之越强。通常把perspective设置在父容器container或舞台stage中。code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS33D变换</title>
	<style type="text/css"> *{ padding: 0; margin: 0; } #container{ background-color: rgb(97,119,176); height: 1000px; width: 1200px; perspective: 1000px; } #main{ height: 500px; width: 500px; margin: auto; position: relative; top: 200px; transform-style: preserve-3d; transition: 1s linear; } #main:hover{ transform:rotateY(60deg); } </style>
</head>
<body>
	<div id="container">
		<div id="main">
			<img src="images/Android.png">
		</div>
	</div>
</body>
</html>

前面没有给container设置透视属性显示的是一个简单的压缩效果，没有视距的变化，而perspective内给人一种近大远小的感受.orm

3D变换每每结合过渡transition使用，设置一个延迟，下面是一个3D变换的样例。xml

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>3D变换样例</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color:#008080;
		}
		#container{
			width: 1100px;
			height: 440px;
			margin: 100px auto;
			border: 1px solid white;
			border-radius: 10px;
			box-shadow: 5px 5px 10px #C0C0C0;
		}
		#stage{
			width: 1050px;
			height:400px;
			margin: 18px auto;
			border: 1px solid white;
			border-radius: 10px;
			box-shadow: 5px 5px 10px #C0C0C0;

		}
		.box{
			float: left;
			width: 320px;
			height: 307px;
			margin: 38px 15px;
			transform-style: preserve-3d;/*设置变化为3D类型*/
			transition: 1.5s;
			position: relative;
			border-color:#008080; 
			box-shadow: 5px 5px 10px #C0C0C0;
		}
		.box:hover{
			transform:rotateY(180deg);
		}
		.face{
			width: 300px;
			height: 307px;
			position: absolute;
		}
		.front{
			border-radius: 2px;
		}
		.back{
			background-color:#282828 ;
			border:1px solid #fff;
			transform: rotateY(180deg);
			border-radius: 2px;
		}
		.back h2{
			color: white;
			text-align: center;
			line-height: 307px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="stage">
				<div class="box">
					<div class="face front"><img src="images/Android.png" alt="403" width="300" height="307"></div>
					<div class="face back">
						<h2>Android Q</h2>
					</div>
				</div>

				<div class="box">
					<div class="face front"><img src="images/Harmony.png" alt="403" width="300" height="307"></div>
					<div class="face back">
						<h2>Harmony os</h2>
					</div>
				</div>

				<div class="box">
					<div class="face front"><img src="images/Apple.png" alt="403" width="300" height="307"></div>
					<div class="face back">
						<h2>Apple ios</h2>
					</div>
				</div>
			</div>		
	</div>
</body>
</html>