使用CSS中的旋转函数可以让元素旋转指定的角度，比如 transform:rotate(45deg) 这条声明是表示将元素顺时针旋转45度，这里的旋转是按照一个默认的原点进行的，在CSS里可以使用transform-origin属性自定义元素变换的原点坐标，下面简单的做一个示例试试看：

#x {
 margin:100px;
 width:150px;height:80px;
 background-color:#49f;
 transform:rotate(45deg);
}

这里给一个id为x的元素定义了旋转45度，旋转前后的对比图如下：

从对比图可以看出，元素的旋转原点默认是元素的中心，如果用transform-origin属性来表示，则可以是：

transform-origin:center;

或者通过百分比定义原点，所以默认情况下也就相当于：

transform-origin:50% 50%;

除了可以使用center定义原点，还可以使用left，right，top和bottom这几个值，与背景定位的定义方法类似，比如上面的示例中如果将原点设置为元素的左上角，则可以定义为：

transform-origin:left top;

下图是旋转前后的对比图：

很明显，此时旋转是以左上角为原点的。

除了通过这几个值定义以外，还可使用具体的长度值来定义原点的坐标，例如刚才定义的左上角也可以定义为：

transform-origin:0 0;

对本示例来说，如果将原点改为右下角可以有下面三种方式：

transform-origin:100% 100%;
transform-origin:150px 80px;
transform-origin:right bottom;

这里transform-origin可以改变的变换原点，并不是只对旋转函数起作用，同样可以用于其他变形函数，例如：

#x {transform:scale(0.8)}

这里使用scale方法将元素尺寸缩放到它的0.8倍，默认情况下同样是基于元素的中心来变换的，下面是变换前后对比图:

如果这时候设置变换的原点为左上角，也就是：

transform-origin:0 0;

则元素会基于左上角进行缩放，下面是对比图：

如果给transform-origin属性设置1个值，则表示设置x轴方向的原点坐标，如果设置2个值，则表示分别设置x轴和y轴的原点坐标，如果设置3个值，则分别表示x轴，y轴和z轴的原点坐标，其中z轴坐标的定义用于设置3D变换的原点坐标。刚才所说的默认原点坐标，如果算上z轴，则应当定义为：

transform-origin:center center 0;

下面是一个用CSS实现的简单风车图案：

制作这个旋转的风车，就必须用到transform-origin属性。这里首先定义8个div分别表示8个扇叶，以便采用CSS旋转来分别定义它们的位置：

<div id="windmill">
 <div class="mill w1"></div>
 <div class="mill w2"></div>
 <div class="mill w3"></div>
 <div class="mill w4"></div>
 <div class="mill w5"></div>
 <div class="mill w6"></div>
 <div class="mill w7"></div>
 <div class="mill w8"></div>
</div>

下面是CSS部分，先将8个扇叶定位到相同的位置，再设置变换原点为右下角，通过分别设置旋转的角度便可实现这个风车的图案：

body {
 background-color:#eee;
 overflow:hidden;
#windmill {
 left:0;right:0;top:0;bottom:0;
 margin:auto;
 width:300px;height:300px;
 animation:one 12s linear infinite; /*--这里顺便定义旋转的动画--*/
@keyframes one {
 0% {transform:rotate(0deg);}
 100% {transform:rotate(-360deg);}
.mill {
 border-radius:75px 20px 0 75px/72px 20px 0 75px;
 width:75px;height:150px;
 transform-origin:right bottom;
.w1 {
 left:75px;
 background-color:#fa2;
.w2 {
 left:75px;
 background-color:#ff6;
 transform:rotate(-45deg);
.w3 {
 left:75px;
 background-color:#3ca;
 transform:rotate(-90deg);
.w4 {
 left:75px;
 background-color:#f3f;
 transform:rotate(-135deg);
.w5 {
 left:75px;
 background-color:#96b;
 transform:rotate(-180deg);
.w6 {
 left:75px;
 background-color:#e66;
 transform:rotate(-225deg);
.w7 {
 left:75px;
 background-color:#2a1;
 transform:rotate(-270deg);
.w8 {
 left:75px;
 background-color:#5be;
 transform:rotate(-315deg);
}

根据默认的层级，后设置的元素层级会覆盖在之前的元素之上，为了让第一个“扇叶”能覆盖最后一个，这里在它之上再覆盖一个小三角形：

.w1:after {
 content:"";
 right:0;bottom:0;
 width:0px;height:0px;
 border-right:90px solid transparent;
 border-bottom:90px solid #fa2;
 transform:rotate(45deg);
 transform-origin:right bottom;z-index:1;
}

接着采用伪元素配合阴影属性，制作风车中间的圆：

#windmill:before,#windmill:after {
 content:" ";
 border-radius:50%;
 left:0;right:0;top:0;bottom:0;
 margin:auto;
#windmill:before {
 width:40px;height:40px;z-index:3;
 background-color:#acd;
 box-shadow:0px 0px 0px 12px #fff;
#windmill:after {
 width:160px;height:160px;z-index:2;
 box-shadow:0px 0px 10px 2px #fff;
}

这样以来，一个旋转的彩色风车就做好了。（ 点这里预览这个风车的Demo ）

CSS3给元素框添加阴影box-shadow属性

认识CSS3元素2D转换（位移/变形/旋转/倾斜）

学习CSS3的transition属性实现过渡效果

关于CSS结构性伪类选择器的用法实例

纯CSS制作正五边形的简单方法（九五顶五九）

强大又实用的CSS运算函数calc的初级用法

使用CSS3阴影属性制作简单雪花图案的步骤

CSS3给文字加阴影效果 text-shadow属性

前一篇： 纯CSS制作旋转太极图阴阳鱼的简单步骤

后一篇： 纯CSS制作会话气泡和微信图标的简单步骤

您可能感兴趣

DIV+CSS十日教程5：浏览器默认样式和CSS优先级

新手站长须知—网站关键词的选择技巧

DIV+CSS补充知识：CSS最基本的语法总结

学习CSS3动画效果（animation和@keyframes）

织梦编辑器文章段落DIV标签怎么变成P标签

简单实用的企业网站右侧在线客服代码

帝国CMS7.2更换Ueditor编辑器的正确步骤

使用CSS制作竖形二级导航菜单的简单步骤

制作手机移动版网站常用的细节标签

新手站长教程 十天学会DIV+CSS网页布局

CSS给网页中英文或给指定字符设置不同字体

设置内容溢出内容区域的表现（overflow属性）

从零开始学习CSS线性渐变（linear-gradient）

关于html5视频标签video的属性和用法

纯CSS制作正五边形的简单方法（九五顶五九）