在css3中,用transform可以实现文字或图像的旋转、缩放、倾斜和移动,并且该元素下的所有子元素,随着父元素一样转、缩放、倾斜和移动。
transform属性
transform的属性包括:rotate()、skew()、scale()、translate(),分别有x、y两个参数,比如rotatex()和rotatey()。
1、rotate():旋转,参数为xdeg,x为数值,如:10deg。
.photo a{
display:inline-block;
overflow:hidden;
border:1px solid #ccc;
padding:5px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}
<div class="photo"><a href="http://www.XXX.com"><img src="XXX.jpg" /></a></div>
2、scale():比例,“1.5”表示以1.5倍的比例放大,如果是负数表示为缩小。
<div class="scale">Web前段工程师</div>
.scale{
padding:5px;
color:#fff;
background-color:#666;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.scale:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}
3、skew(): 倾斜。
<div class="skew">Web前段工程师</div>
.skew{
margin-top:10px;
padding:5px;
color:#fff;
background-color:#666;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
-o-transform:skew(20deg);
transform:skew(20deg);
}
4、translate(): 位移,如下例子中translate(120px,10px)表示向右移动120px,向下移动10px,如果是向上向左移动分别为负数。
<div class="translate">Web前段工程师</div>
.translate:hover{
-webkit-transform:translate(120px,10px);
-moz-transform:translate(120px,10px);
-o-transform:translate(120px,10px);
transform:translate(120px,10px);
}