css3 3D旋转特效

时间 2019-12-04

标签 css3 css 3d 旋转特效栏目 CSS 繁體版

原文原文链接

最近本身的网站正在制做，因为是我的网站，因此我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章，错误之处，还望各位看官老爷评论中指出。css

3D旋转，难点在与其处在一个三维的空间中，咱们须要发挥一下空间想象力在头脑中构建它的结构，同时，它的坐标系是随着所作的3D变化而改变的，因此在进行变换的过程当中，不一样变换动做的顺序亦是相当重要。html

网页中常见的3D旋转特效有两种：绕Y轴旋转和绕X轴旋转。html5

绕Y轴旋转180度：css3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绕Y轴旋转</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px auto;
			}
			#box,.container,.front,.back{
				width: 200px;
				height: 200px;	
			}
			.container{
				position: relative;
				transform-style: preserve-3d;
				transition: all 1s linear;
			}
			.container:hover{
				transform: rotateY(180deg);
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				color: #fff;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
			}
			.front{
				background: red;
			}
			.back{
				background: green;
				transform: rotateY(180deg);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="container">
				<div class="front">front</div>
				<div class="back">back</div>
			</div>
		</div>
	</body>
</html>

代码没有注释，由于都是一些属性，不懂的属性能够直接百度，这里主要讲解其核心思想。

绕Y轴旋转，就是将正面的转到后面，然后面的显示在正面。若是直接旋转，不设置背面的元素的话，那么旋转180度后你所看到的就像一张画贴在玻璃上，你从背面看而已。这种比较简单，可是在网页中并不经常使用，最多的仍是上面代码中所写的这种效果。chrome

一、咱们要有两个面。设置backface-visibility为hidden，隐藏两个面的背面，将须要显示在背面的那个面back绕Y轴旋转180度。浏览器

二、将两个面装在一个盒子a里面而且设置盒子transform-style: preserve-3d，咱们要操做的是这个盒子。测试

三、给盒子a设置鼠标移入旋转180度，完成！ 网站

绕X轴旋转和绕Y轴旋转的本质是相同的，因此绕X轴旋转直接讲解旋转90度，这个原理也能够反过来套用在Y轴的旋转上。firefox

相比来讲，旋转90度要作的处理多了几步。3d

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绕X轴旋转</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px auto;
				border: 1px solid blue;
			}
			#box,.container,.front,.back{
				width: 200px;
				height: 200px;	
			}
			.container{
				position: relative;
				transform-style: preserve-3d;
				transition: all 1s linear;
			}
			.container:hover{
				transform: rotateX(90.1deg);
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				color: #fff;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
			}
			.front{
				transform: translateZ(100px);
				background: red;
			}
			.back{
				background: green;
				transform: rotateX(-90deg) translateZ(100px);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="container">
				<div class="front"></div>
				<div class="back"></div>
			</div>
		</div>
	</body>
</html>

看代码不难发现，其实旋转多少度的本质都是同样的，可是旋转90度相对来讲在开始旋转的处理要进行在Y轴方向的移动。由于若是不进行Y轴方向的移动，旋转90度后两个面成T字形，而咱们须要他们成L字形。

同时，再次强调，某个面旋转的同时它的坐标系也会发生变化，因此必定要注意动做的前后顺序。这个能够本身画一个三维坐标系来帮助理解。

最后一点，在进行大盒子的旋转时，你们可能会看到个人代码中：

.container:hover{
				transform: rotateX(90.1deg);
			}

写90deg在firefox是正常的，可是在chrome中你的鼠标放在盒子上会出现闪动的状况，可是你写大于90就能够解决，具体缘由暂时不详。

在测试的过程当中我使用了最新的chrome浏览器，因此省略了其中的兼容性语句，在实际的使用过程当中，必定要加上兼容性语句。