css3 3D旋转特效

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

css3 3D旋转特效相关推荐

css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
火遍抖音的3D旋转特效
火遍抖音的3D旋转特效代码前端代码实现: 3d旋转特效.html 0000644 0000764 0000765 00000015444 13577153703 014745 0 ustar www ...
前端开关按钮样式_7款外观迷人的HTML5/CSS3 3D按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
CSS3 图片旋转特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
在Unity3D中使用uGUI实现3D旋转特效
各位朋友大家好,欢迎大家关注我的博客,我是Payne,我的博客地址是http://qinyuanpei.com.最近一位朋友问我,如何在Unity引擎中实现类似<英雄联盟>中选择皮肤时 ...

css3 3D旋转特效

css3 3D旋转特效相关推荐

最新文章

热门文章