css3旋转？css3 rotate 可以反方向旋转吗
大家好，如果您还对css3旋转不太了解，没有关系，今天就由本站为大家分享css3旋转的知识，包括css3 rotate 可以反方向旋转吗的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
css3旋转半径的计算
在代码的编写中，我们常常会用到通过css3实现各种图片和文字的旋转，下面我就列出常见的七种方法：
一、圆角（Rounded Corner）
.box_round{
-moz-border-radius: 30px;/* FF1+*/
-webkit-border-radius: 30px;/* Saf3+, Chrome*/
border-radius: 30px;/* Opera 10.5, IE 9*/
}
圆角的实现比较简单，只要设好一个半径值就可以了。遗憾的是，目前所有的IE都不支持CSS圆角，要等到IE 9才行。
二、盒状阴影（Box Shadow）
.box_shadow{
-moz-box-shadow: 3px 3px 4px#ffffff;/* FF3.5+*/
-webkit-box-shadow: 3px 3px 4px#ffffff;/* Saf3.0+, Chrome*/
box-shadow: 3px 3px 4px#ffffff;/* Opera 10.5, IE 9.0*/
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff');/* IE6,IE7*/
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')";/* IE8*/
}
-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的，都有4个参数，含义分别为：x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。
IE 6~8使用其独有的滤镜，需要设置三个参数：offX（X轴偏移值）、offY（Y轴偏移值）、Color（阴影颜色）。
三、线性渐变（Gradient）
.box_gradient{
background-image:-moz-linear-gradient(top,#444444,#999999);/* FF3.6*/
background-image:-webkit-gradient(linear,left top, left bottom, color-stop(0,#444444),color-stop(1,#999999));/* Saf4+, Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');/* IE6,IE7*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')";/* IE8*/
}
先看Firefox。
-moz-linear-gradient(top,#444444,#999999);
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
-webkit-gradient(linear,left top, left bottom, color-stop(0,#444444),color-stop(1,#999999));
-webkit-gradient是webkit引擎对渐变的实现，一共有五个参数。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（辐射渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。
DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');
IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。
四、透明（opacity）
正常情况下，上层的对象会覆盖下层的对象。
但是，如果将上层对象的颜色变为透明，就可以透过它看到下层对象。
.box_rgba{
background-color:#B4B490;
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490');/* IE6,IE7*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')";/* IE8*/
zoom: 1;
background-color: rgba(180, 180, 144, 0.6);/* FF3+, Saf3+, Opera 10.10+, Chrome*/
}
先看第一行。
background-color:#B4B490;
这是设置对象的预备色，也就是不透明时的颜色。如果浏览器不支持透明，就将显示这个颜色。
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490');/* IE6,IE7*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')";/* IE8*/
zoom: 1;
这几行是专门为IE写的，其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色（startColorstr）和终点色（endColorstr）。在单色透明的情况下，这两个值是相同的。需要注意的是，它们的取值是一个八位的十六进制值，前两位表示alpha通道值，00表示完全透明，FF表示完全不透明；后六位则是这个颜色的RGB值。
background-color: rgba(180, 180, 144, 0.6);
除了IE，其他浏览器几乎都支持rgba函数。它有四个参数，前三个为一种颜色的RGB值，第四个为透明度，这里设为0.6。
五、旋转（rotation）
.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度。
六、服务器端字体（font-face）
设计网页的时候，可能会用到某种特殊的字体。如果用户的机器中没有安装，文字只能以普通字体显示。
这时可以让用户的浏览器自行下载服务器端字体，然后就能呈现出设计者想要的效果。
@font-face{
font-family:'MyFont';
src: url('myfont.eot');/* IE6+*/
src: local('myfont.ttf'),
url('myfont.woff') format('woff'),/* FF3.6*/
url('myfont.ttf') format('truetype');/* FF3.5+, Saf3+,Chrome,Opera10+*/
}
第一行代码：
font-family:'MyFont';
表示为这种字体起一个名称，可以随意设置，我这里用的是MyFont。
src: url('myfont.eot');
这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的。
src: local('myfont.ttf'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype。
然后，使用的时候这样写就可以了。
h2{ font-family:"MyFont";}
需要注意的是，字体文件必须与网页文件来自同一个域名，符合浏览器的“同源政策”。另外，由于中文字体文件太大，服务器端字体显然只适用于英文字体。
七、其他
利用css3，还可以完成transform（变形），包括skew（扭曲）和scale（缩放），以及css transitions（动态变换）。
css3 rotate 可以反方向旋转吗
css3新增的一个控制元素旋转属性的函数是rotate()[不要怀疑，它的确是一个隐形的函数，他的使用很类似与js中的函数]。
同之前所讲过的translate和scale，他也分为2D和3D的旋转，差别就是Z轴的旋转。
现在我们来看实例，代码如下：
<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>
demo的div里面有三个div，最终实现的效果如下图：
现在我们对其应用rotate，假设不知道里面可以传入几个值，那我们可以分别试试传入不同数量的值对比效果，给demo加上：
transform:rotate(45deg)（旋转45度，deg是degree的缩写，意为角度；当然这只是一个单位，还有别的单位，但不常用；你也可以直接采用数字而不用单位，这个数字会被自动转换为角度）
效果如下图：
我们再给demo加上：
transform:rotate(45deg，45deg);
会发现没有变化，查看代码知道原来这个属性浏览器没有识别出来，这是为什么呢？
这是因为默认的rotate（）只能传入一个旋转角度值，而且默认的角度是以电脑屏幕的基准面，以自己的中心为基准点进行旋转的。说白了他是一个二维的旋转。
那，我么应该怎么rotate进行三维的旋转呢？
很简单我之前又讲到过translate的translate3d这一属性；同样rotate也有rotate3d的旋转属性。
既然是3d，那我们就很自然的知道他有rotateX()/rotateY()/rotateZ()，这三个分支的旋转属性。
现在我们给demo加上
transform:rotate3d(45deg，45deg,0deg);
在浏览器当中我们同样会发现不起效果，原因还是不识别。
其实这就是rotate3d和translate3d，不同的地方，translate3d传入的三个值分别会被解析为XYZ的位移距离，二translate则不会这么解析，官方给出的解析方法是rotate3d(X?,Y?,Z?,angle);也就是你需要对你需要旋转的轴进行判断，如果你要沿着该轴转动那就将该轴的值设置为1，否则为0；然后在后面的angle中设置旋转的角度，需要注意的是，angle只有一个角度值。
所以上面正确的写法是：
transform:rotate3d(1，1,0,45deg);
效果如下图：
分析：
上图画的坐标轴没画好，见谅哈。
横的是X轴，竖的是Y轴，斜线是Z轴(也就是你盯着电脑看视线到电脑这个轴)
rotate的转动基准是以轴来转动的，当多个轴交叠旋转才会形成围绕某个点旋转的效果。
元素默认情况下，他所在的面是Z轴与Y轴所形成的面（或平行面）。当谈围绕X轴转，若传入的为正值，则元素上面会向屏幕里面转动，下面回向屏幕外面转动，也就是向用户转动。其他的几个面也是同样的道理。
现在我们来看沿着单个轴转动的情况，这样会帮助你理解上面这段话。
现在我给demo加上
transform:rotateX(45deg);
有没有发现图象显得没有原来的高了，对比下两边的图象。
其实元素的高度并没有变，而是透视导致。
现象一张纸看他的侧面和看他的正面，所得到的宽度是不一样的。
rotateY()/rotateZ()
这里我就不做介绍了。因为它们的使用和rotateX一样，只是转的角度不同罢了。
好了rotate的初级使用就介绍到这里了。
css3圆环旋转效果动画怎么做
1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。
2、然后写html结构，只需要一个div元素即可，class名字叫做img
3、设置其边框为不同的颜色，边框宽度设置成100px。
4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码
6、来看一下最后的效果，还是不错的。
感谢您花时间阅读本文！我们希望通过对css3旋转的问题进行探讨，为您提供了一些有用的见解和解决方案。如果您需要更多帮助或者有其他疑问，请不要犹豫与我们联系。