css3 3D旋转特效

最新推荐文章于 2024-05-22 07:00:00 发布

fisher-zh

最新推荐文章于 2024-05-22 07:00:00 发布

阅读量1.8k

点赞数 1

文章标签： css3 旋转

本文链接：https://blog.csdn.net/sir1241/article/details/52766694

版权

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了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浏览器，所以省略了其中的兼容性语句，在实际的使用过程中，一定要加上兼容性语句。

fisher-zh

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3 3D旋转特效

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章，错误之处，还望各位看官老爷评论中指出。3D旋转，难点在与其处在一个三维的空间中，我们需要发挥一下空间想象力在头脑中构建它的结构，同时，它的坐标系是随着所做的3D变化而改变的，所以在进行变换的过程中，不同变换动
复制链接

扫一扫