CSS3基础使用transform-origin属性改变元素变换原点

使用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度,旋转前后的对比图如下:

CSS旋转原点1.png

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

transform-origin:center;

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

transform-origin:50% 50%;

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

transform-origin:left top;

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

CSS旋转原点2.png

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

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

transform-origin:0 0;

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

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

CSS旋转原点3.png

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

#x {transform:scale(0.8)}

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

CSS缩放原点1.png

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

transform-origin:0 0;

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

CSS缩放原点2.png

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

transform-origin:center center 0;

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

风车.png

制作这个旋转的风车,就必须用到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 {
 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 Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.medwheat.com.cn/css3/152.html