css3 3D旋转特效

「爱情、让人受尽委屈。」 2022-07-16 06:28 378阅读 0赞

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

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

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

绕Y轴旋转180度：

<!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度后你所看到的就像一张画贴在玻璃上，你从背面看而已。这种比较简单，但是在网页中并不常用，最多的还是上面代码中所写的这种效果。

**1、我们要有两个面。设置backface-visibility为hidden，隐藏两个面的背面，将需要显示在背面的那个面back绕Y轴旋转180度。**

**2、将两个面装在一个盒子a里面并且设置盒子transform-style: preserve-3d，我们要操作的是这个盒子。**

**3、给盒子a设置鼠标移入旋转180度，完成！ **

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

相比来说，旋转90度要做的处理多了几步。

<!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浏览器，所以省略了其中的兼容性语句，在实际的使用过程中，**一定要加上兼容性语句。**