css元素旋转原点，使⽤transform-origin属性改变元素变换原点使⽤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旋转来分别定义它们的位置：
下⾯是CSS部分，先将8个扇叶定位到相同的位置，再设置变换原点为右下⾓，通过分别设置旋转的⾓度便可实现这个风车的图案：body {
background-color:#eee;
overflow:hidden;
}
#windmill {
position:absolute;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;position:absolute;
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:"";
position:absolute;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%;
position:absolute;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)
本站站长⼩泽(英⽂名: Colin)，80后⾃由职业者，QQ号为84688099，建⽴本站的⽬的是整理学习笔记，分享学习经验，认识更多的朋友。感谢您阅读本站的⽂章，部分内容参考了⽹上的⼀些教程，但我会尽量根据⾃⼰的理解写更多原创的东西，本站⽹址如下：
