css3手册:http://css.doyoe.com/
Transform
Transform:意思为变形的意思,它主要包括移动translate、旋转rotate、缩放scale、扭曲skew。
首先来认识一下移动translate
translate: translation为2D平移。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0,也可以单独的使用一个轴来平移。
translate3d: translation为3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
html:
<div class="wrapper">
</div>
css:
.<style>
.wrapper{
width: 200px;
height: 200px;
background-image: url(img/img1.jpg);
background-repeat: no-repeat;
background-size:200px 200px;
margin: 50px auto;
opacity:0.8;
transition: all 2s;
}
.wrapper:hover {
transform: translateX(100px);
/*transform: translateY(100px);
transform: translate3d(100px,100px,100px);
*/
}
</style>
效果:
translateX(100px)向X轴平移100px,translateY(100px)向Y轴平移100px, translate3d(100px,100px,100px)向X,Y,Z平移100px;
rotate:rotate为2D旋转,参数为要旋转的角度。单位为deg。使用时最好与transform-origin一起使用。
rotate3d:rotate3d为3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略。
html:
<div class="wrapper">
</div>
css:
<style>
.wrapper{
width: 200px;
height: 200px;
background-image: url(img/img1.jpg);
background-repeat: no-repeat;
background-size:200px 200px;
margin: 50px auto;
opacity:0.8;
transition: all 2s;
}
.wrapper:hover {
transform: rotateX(60deg);
/*transform: rotateY(45deg);
*/
}
</style>
效果:
scale:scale为 scale 2D缩放。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值。参数值比1小为缩放,比1大为扩展。
html:
<div class="wrapper">
</div>
css:
<style>
.wrapper{
width: 200px;
height: 200px;
background-image: url(img/img1.jpg);
background-repeat: no-repeat;
background-size:200px 200px;
margin: 50px auto;
opacity:0.8;
transition: all 2s;
}
.wrapper:hover {
transform: scaleX(0.5);
/*transform: scaleY(.5);*/
}
</style>
效果:
skew:skew指扭曲。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0,单位为deg(角度),也可以单独的使用,skewx():X轴的(水平方向)扭曲,skewy():Y轴的(垂直方向)扭曲。
html:
<div class="wrapper">
</div>
css:
<style>
.wrapper{
width: 200px;
height: 200px;
background-image: url(img/img1.jpg);
background-repeat: no-repeat;
background-size:200px 200px;
margin: 50px auto;
opacity:0.8;
transition: all 2s;
}
.wrapper:hover {
transform: skewX(-15deg);
/*transform: skewX(-15deg);*/
}
</style>
**总结:**使用这些属性时,可以搭配@keyfroms来一起用,效果更加明显。