CSS3旋转特效总结整理

我们都有在网页上见过一些交互性的效果，比如用鼠标滑向图标或是按钮的时候，图标会自动旋转一周，这就是CSS3旋转效果。在CSS3中有个常见的transform应用，transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。本文主要侧重讲解CSS3的平面旋转（2D）方法和立体旋转（3D）方法。不过既然提起transform，还是先普及一下transform属性的基本知识：

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

1、旋转rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），angle是指旋转角度，如果设置的值为正数表示顺时针旋转，负数则表示逆时针旋转。如：transform:rotate(30deg)。

2、扭曲skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，默认为0deg。

3、缩放scale([, ])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：transform:scale(2,1.5)。

4、移动translate([, ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px)。

5、矩阵变形matrix(, , , , , ) ：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。

一、CSS3旋转rotate()方法

语法：

transform：rotate(度数);

效果：

说明：

度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写。如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转。

代码示例：

<style>.demo { margin:100px auto; width:300px; height:300px; background:#ededed; border:1px dotted #ff0000; position:relative;}.fl { width:300px; height:145px; background:#00cb99;}.fr { width:300px; height:145px; margin-top:10px; background:#0093b4;}.pa { position:absolute; top:75px; left:75px; width:150px; height:150px; background-color:#f2f2f2;}</style>
<div class="demo">
<div class="fl"></div>
<div class="fr"></div>
<div class="pa"></div>
</div>

二、CSS3实现3D翻转

3D翻转也是网页常用特效之一。用CSS3制作3D翻转图像，效果很漂亮，3D旋转的特别之处就是支持阴影旋转和兼容响应式网页设计，使得整体场景非常有感觉。

<style>
.photo-container {
perspective: 1200px; /* 透视视图 */
width:45%;
float:left;
}
.rotate-box {
position:relative;
transform-style: preserve-3d; /* 3D 转换 */
transition:1s ease; /* 转换效果持续 1秒 */
margin:10%;
}
.rotate-box img {width:100%;height:auto;}
</style>
<div class="photo-container"><div class="rotate-box"><img src="winwall.jpg"/><div class="text"><h2>这是一个标题</h2><p>这是一段图片相关的简介内容。。</p></div></div></div>

背面文本样式，透明背景，并设置默认为反转180度，其次要将图像置于图像的背面，所以这里我们利用z轴来控制，CSS代码如下：

.text {
position:absolute;top:0;
width:100%;height:100%;
transform: rotateY(180deg) translateZ(1px); /* 反转180度并设置z轴让其置于图片背面 */
color:#666;
text-align:center;
opacity:.06;
background:rgba(255,255,255,.9);
transition: 1s opacity;
}

使用Hover来触发动画：

.photo-container:hover .rotate-box{
transform: rotateY(180deg);
}
.photo-container:hover .text{opacity:1}

通过伪元素（:after）给图像添加一个透视阴影，使整体更有3D立体感觉。

.rotate-box:after {
content:' ';
display:block;
width:100%;
height:7vw; /* vw是移动设计备窗体单位*/
transform:rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */
}