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，建立本站的目的是整理学习笔记，分享学习经验，认识更多的朋友。感谢您阅读本站的文章，部分内容参考了网上的一些教程，但我会尽量根据自己的理解写更多原创的东西，本站网址如下：

转载请注明来自：http://www.cssaaa.com/css3/152.html