在本文中，我们将详细介绍html–使这个CSS3动画旋转只旋转一次的各个方面，并为您提供关于css实现旋转动画的相关解答，同时，我们也将为您带来关于CSS33D旋转动画代码实例_html/css_WE

在本文中，我们将详细介绍html – 使这个CSS3动画旋转只旋转一次的各个方面，并为您提供关于css实现旋转动画的相关解答，同时，我们也将为您带来关于CSS3 3D旋转动画代码实例_html/css_WEB-ITnose、CSS3 skew倾斜、rotate旋转动画_html/css_WEB-ITnose、css3 这个三角怎么旋转_html/css_WEB-ITnose、CSS3动画之3D动画_html/css_WEB-ITnose的有用知识。

• html – 使这个CSS3动画旋转只旋转一次（css实现旋转动画）
• CSS3 3D旋转动画代码实例_html/css_WEB-ITnose
• CSS3 skew倾斜、rotate旋转动画_html/css_WEB-ITnose
• css3 这个三角怎么旋转_html/css_WEB-ITnose
• CSS3动画之3D动画_html/css_WEB-ITnose

html – 使这个CSS3动画旋转只旋转一次（css实现旋转动画）

<div>
  <span><em></em></span>
  <span><em></em></span>
</div>

.spinner {
  width: 250px;
  height: 250px;
  background: #aaa;
  margin: 0 auto;
  position: relative;
}
.spinner:after {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  border-radius: 100%;
  background: #fff;
  top: 10%;
  left: 10%;
}
.spinner span em {
  background: #0e728e;
  -webkit-animation-duration: 6s; 
}
@-webkit-keyframes rotate-rt {
  0%   { -webkit-transform: rotate(0deg); }
  25%  { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(180deg); }
}
@-webkit-keyframes rotate-lt {
  0%   { -webkit-transform: rotate(0deg); }
  25%  { -webkit-transform: rotate(0deg); }
  50%  { -webkit-transform: rotate(120deg); }
  100% { -webkit-transform: rotate(120deg); }
}
.spinner {
  border-radius: 100%;
  position: relative;
}
.spinner span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.spinner span:first-child {
  left: 0;
}
.spinner span:last-child {
  left: 50%;
}
.spinner span em {
  border-radius: 250px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
}
.spinner span:first-child em {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-animation-name: rotate-lt; 
  -webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
  left: -100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-animation-name: rotate-rt; 
  -webkit-transform-origin: 100% 50%;
 }

@-webkit-keyframes rotate-rt {
    0% { -webkit-transform: rotate(0deg); }
   25% { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(180deg); }
}
@-webkit-keyframes rotate-lt {
    0% { -webkit-transform: rotate(0deg); }
   25% { -webkit-transform: rotate(0deg); }
   50% { -webkit-transform: rotate(120deg); }
  100% { -webkit-transform: rotate(120deg); }
}

CSS3 3D旋转动画代码实例_html/css_WEB-ITnose

CSS3 skew倾斜、rotate旋转动画_html/css_WEB-ITnose

css3出现之前，我们实现一个对象的一组连续动画需要通过javascript或jquery编写，脚本代码较为复杂；

若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件；

有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。

最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理

立即学习“前端免费学习笔记（深入）”；

今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵）

图1

具体步骤如下：

1、放置两个div，一个作为容器（图1中绿色背景部分 id="warp"），另一个作为动画元素（图1中黄色背景部分 id="box"）

HTML代码：

<div id="warp">    <div id="box">WEB</div></div>

CSS代码（设置容器及动画元素默认样式）：

#warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;}#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0;                }

注意：#box{position: relative;}是为该元素接下来做动画做准备，因为动画过程中需要改变其位置，故这里使用相对定位

上述代码为基本的html css，大家应该没问题吧

此时效果如下：

2、使用CSS3 @keyframes自定义动画

CSS代码：

@keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;    } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;    } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;    } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;    } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;    } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;    } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;    } 60% { transform: rotate(-90deg); transform-origin: left bottom;    } 65% { transform: rotate(-180deg); transform-origin: left top;    }}

代码解析：

1. css3自定义动画需要使用@keyframes规则，具体请看CSS3 @keyframes 规则

2. 设置动画执行进度

   本示例中定义了 0% 20% 22% 30% 40% 50% 55% 60% 65%几个动画进度，

   百分比到底代表什么意思？

   举例说明：如果整个动画执行10秒，那么20%就代表当动画执行到2秒时的效果。所以整个自定义动画翻译过来就是在每个执行进度中定义css样式（比如 width，height，color等），这样就形成了连贯的动画效果。执行进度百分比根据实际情况可自行调整。

   注意：该执行进度并非一定要设置100%，如本示例中仅设置到65%，这就意味着剩下的35%就由css3自行完成动画回归到原始状态（大家可以试试）

3. 元素倾斜（元素变形）、旋转（元素不变形）

   本示例中用到倾斜及旋转动画，倾斜使用skew()，参数为倾斜度数；旋转使用rotate()，参数为旋转度数；

   倾斜原理示意图如下：

X轴逆时针转为正；Y轴顺时针转为正；

举例：

skew(30deg),在本示例中效果将成这样

skew(-30deg),在本示例中效果将成这样

Y轴的这里就不举例了，根据上述提示大家可自行测试效果

transform-origin，元素倾斜或转动中心点，具体属性值可看CSS3 transform-origin 属性

这里的中心点，指的是动画元素的中心点，元素围绕该点转动或倾斜，该点坐标是不会改变的；个人觉得这里需要头脑中产生一些几何图形以便于理解，或者用一张纸（手机之类的物品）放在桌子上，用手固定该物品的某个点演示一下转动效果，就明白了

3、执行自定义动画

CSS代码：

#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;}

代码解析：

animation: move 5s infinite;

代表该自定义动画完成耗时5秒，并且无限循环执行

animation属性的详细说明请看这里CSS3 animation（动画） 属性

OK，上述步骤及原理大家都清楚了吧。本示例完整代码如下，各位可以直接复制去执行看看效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>HTML5+CSS3 skew倾斜、rotate旋转动画</title>        <style type="text/css"> #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;            } #box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;                            } @keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;                } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;                } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;                } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;                } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;                } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;                } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;                } 60% { transform: rotate(-90deg); transform-origin: left bottom;                } 65% { transform: rotate(-180deg); transform-origin: left top;                } } </style>    </head>    <body>        <div id="warp">            <div id="box">WEB</div>        </div>    </body></html>

好了，今天分享就到这里，以后还有更多哟，请大家一起来交流下，有兴趣的朋友给我的文章评论下嘛

css3 这个三角怎么旋转_html/css_WEB-ITnose

回复讨论(解决方案)

box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’);
-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’)”; /* IE8 */
}
除了IE以外，其他浏览器都是用rotate函数，实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度（degree）。
IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数，前四个参数需要自行计算三角函数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数SizingMethod表示重绘方式，’auto expand’代表自动扩展到新的边界。
除了这个滤镜，IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1，2，3，0，分别表示顺时针选择90度、180度、270度和360度。

CSS3动画之3D动画_html/css_WEB-ITnose

所有东西一跟3d扯上关系，复杂指数都是噌噌噌往上走。不过也正常，毕竟多了一个维度，要有三维应有的尊严。

3D Transforms要怎么写？能写翻牌效果吗？能写翻书效果吗？能写出立体书的效果吗？点进来，答案都在这里面。

很多时候，仅仅将元素进行二维层面的变换显然不是人类的终点，毕竟十二维空间都可能不是极限（视频: 从一维空间到十二维空间 ）。

Intro to 3D Transforms 的作者David DeSandro 说，现在可是21世纪，可我们竟然还在跟三十年前的二维空间界面扯皮。所幸2011年，我们有了CSS3，我们还有了3D Transforms，真是一个值得奔走相告的大事件。

Transform 2d 3d

3D变换相较2D变换，坐标系中多了Z轴，也就意味着物体除了上下左右，还可以前后移动。而rotate在2D中的旋转方式，在3D中与rotateZ相当。

立即学习“前端免费学习笔记（深入）”；

那么，单纯地将transform中的参数扩展出Z维度，就能实现3D效果了吗？我看见CSS3笑了。

perspective 概念理解

什么是perspective？词典中翻译为观点、远景、透视图。这是一个非常抽象的概念，需要一点空间想象力。

我们先抛开这个概念，尝试使用刚才说到的知识点进行翻牌（咦）效果的尝试，聪明的你一定分分钟码出来：

但是放浏览器一看，这不对呀，为什么用3D的代码写出了2D的效果。

这个时候有请我们的perspective透视君。

学过素描的人一定对透视的概念不陌生，透视是保证素描写生真实合理的基础。

视频： 透视学之一点透视法

CSS3中的perspetive在这样一个体系里就代表着元素与观者之间的距离，形象点说，就是元素3D效果的强度。CSS3中的3D效果消失点固定，变化的是观者与元素之间的距离。不过perspective数值与3D效果强度是成反比的，数值越大，元素的3D效果越不明显——2000px的视点意味着你看的是远方的物体，而100px则意味着这个物体就在你眼前。

这里有个图或许能帮助我们想象3D效果强度这个概念——

（图片来源： 维基百科 ）

如果还是不懂，还有一个办法，就是在浏览器中边调整perspective数值边观察3D效果。

（图片来源： Intro to CSS 3D transforms - Perspective ）

左图与右图的元素均绕Y轴旋转了45度，但差别很明显，右图更容易让人想到一个画面中集体开启的窗户。左图的问题就在于，每个元素的消失点各自为政，都在元素的中心点位置，而右图的消失点则统一在实线方框的中心位置。实现方法就是将元素的perspetive设置转移至元素父容器上。

讲到这里，这种简单的3D其实在很多非立体设计的触屏页中已经够用，稍微使用一点就能产生非凡的效果，比如第1期中介绍过的 D Rose触屏案例 。

明眼人会说，这样子可以画个正方体出来了也。我看见CSS3又笑了。

建立三维空间体系

现实总是乳齿残酷

有了perspetive属性，我们顶多是一群会在纸上画素描的家伙，要想徒手造模型，还是太嫩。就拿刚才的翻牌效果来说，如果你翻滚card父容器，无论怎么翻，能看到的只有正面的卡片，因为现在的体系就是一张素描绘画，你拿着再逼真的素描画翻到背面，也是看不到真实物体的背面的对吧。超越平面3D的关隘就在于transform-style: preserve-3d的属性设置，默认值为flat，即“素描作品”。这个属性的设置旨在告诉子元素需要遵循怎样的空间体系规则。这个属性不能继承，因此只要有子元素需要设置空间体系规则，就得在父元素声明这个属性。

有了浏览器为我们处理空间体系规则，可以省不少事，不需要你担心层级问题、不需要你操心哪个元素转到哪里要消失哪个元素转到哪里要出现，嗯，小编从没自己这么干过，从没。

从翻牌到翻书

翻牌那是皇帝干的事儿，我们文化人得翻书。刚才的翻牌都是在方块的中部为轴进行的变换，我们把变换原点一换，就变成书页在翻了。

一本合上的书正常来说是在Y轴右侧，每一页都包含两面，也就是说一本书是由若干个翻页效果组合而成，每一页的变换原点在元素左侧。由此可以在翻牌的基础上迅速整出一个翻书demo（猛戳查看 翻书demo ）。

阴影的使用能让翻书效果变得更真实

（ 猛戳查看demo ）

3D动画之Hard Level：立体书

立体书在外国叫Pop-Up Book，满满的“Surprise!”感。这种超越传统平面书籍的阅读模式常被用于儿童书籍。

（图片来源： A Guided Tour of THE MEL BIRNKRANT COLLECTION ）

要用CSS3实现这种效果，想想还有点小激动。

首先建立一个立体书规则：

书开，元素起

元素竖起速度小于等于书页开启速度

元素折叠后不可露出书边

元素层叠关系不可反自然

剩下的事也就水到渠成，无非是在每一页建立3D体系、立体元素从rotateX(90deg)转换到rotateX(0deg)的事儿。

（ Mozzilla的小demo ）

小编曾做过一个丧心病狂的立体书触屏页，由于立体书左右两页互相关联的特性，翻牌的方式不太适合用在这里，这里使用的是另一种较为麻烦的方式——不像翻牌方式中的前后两页捆绑，这里的书页左右两页属于一个3D体系，通过translateZ值的变换控制层级关系，因为在3D体系里，z-index已被抛弃。

猛戳进入：麦芒推广页

终端支持

由于截至目前为止，CSS3的3D功能还止于炫技的阶段，安卓机与iOS的支持效果存在差异且难以调和，从上面那个案例中肉眼可见的坑就能看出，因此除了简单的3D转换，不建议在大项目中大面积使用3D深层功能。

3D与硬件加速

坊间流传这这样一个传说：一旦使用3D属性，就能触发设备的硬件加速，从而使得浏览器的表现更佳。但这句话也得看情境——

想象使用GPU加速的动画就像是Vin Diesel（速度与激情的主角）开着Dominic标志性的汽车 —— Dodge Charger。它的定制900 hp引擎可以让它在一瞬间从0加速到60码。但是如果你开着它在拥挤的高速公路上又有什么用呢？这种情况下你选择的车辆Charger是正确的。但是问题是你还在一个拥堵的高速公路上。——《 CSS硬件加速的好与坏 》

因此千万别贪心，将3D效果数量控制在一定范围内，页面性能才是重中之重。——来自得到惨痛教训的小编的忠告

参考资料：

Intro to CSS3 3D transforms by David DeSandro ——详尽又新鲜的3D Transformers手册，包含许多一看就懂的小Demo，妈妈再也不用担心我的3D了。

Perspective (graphical) ——对透视学还一知半解的可以看看维基的详细说明。

Unfolding the Box Model: Exploring CSS 3D Transforms by Chris Ruppel ——非常赞的3D Transforms介绍，从2D到3D过渡，启动联想学习法，一看就明白，就怕你不看。

CSS硬件加速的好与坏 ——很多事情都不是一两句能讲清楚的，但是只要深入了解原理，一两句都不用讲就清楚了。

拇指期刊 · 第8期·CSS3动画开发手册

《CSS3动画之补间动画》

《CSS3动画之逐帧动画》

《CSS3动画之3D动画》

关于html – 使这个CSS3动画旋转只旋转一次和css实现旋转动画的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于CSS3 3D旋转动画代码实例_html/css_WEB-ITnose、CSS3 skew倾斜、rotate旋转动画_html/css_WEB-ITnose、css3 这个三角怎么旋转_html/css_WEB-ITnose、CSS3动画之3D动画_html/css_WEB-ITnose等相关内容，可以在本站寻找。