放大 旋转 css3,CSS3详解：transform 的旋转、旋转放大、放大、移动

CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

360°旋转 修改rotate(旋转度数)

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“90deg”表示“90度”下同。.a{

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

width:200px;

height:200px;

background-color:#000000;

display:block;

margin:100px auto;

color:#fff;

text-align:center;

line-height:200px;

font-size:20px;

font-weight:bold;

}

.a:hover {

transform:rotate(360deg);

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

-ms-transform:rotate(360deg);

}

360度旋转

放大 修改scale(放大的值)

transform:skew()：

含义：倾斜；

.a{

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

width:200px;

height:200px;

background-color:#000000;

display:block;

margin:100px auto;

color:#fff;

text-align:center;

line-height:200px;

font-size:20px;

font-weight:bold;

}

.a:hover {

transform:scale(1.2);

-webkit-transform:scale(1.2);

-moz-transform:scale(1.2);

-o-transform:scale(1.2);

-ms-transform:scale(1.2);

}

放大效果

旋转放大 修改rotate(旋转度数) scale(放大值)

.a{

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

width:200px;

height:200px;

background-color:#000000;

display:block;

margin:100px auto;

color:#fff;

text-align:center;

line-height:200px;

font-size:20px;

font-weight:bold;

}

.a:hover {

transform:rotate(360deg) scale(1.2);

-webkit-transform:rotate(360deg) scale(1.2);

-moz-transform:rotate(360deg) scale(1.2);

-o-transform:rotate(360deg) scale(1.2);

-ms-transform:rotate(360deg) scale(1.2);

}

旋转放大

上下左右移动 修改translate(x轴,y轴)

.a{

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

width:200px;

height:200px;

background-color:#000000;

display:block;

margin:100px auto;

color:#fff;

text-align:center;

line-height:200px;

font-size:20px;

font-weight:bold;

}

.a:hover {

transform:translate(0,-10px);

-webkit-transform:translate(0,-10px);

-moz-transform:translate(0,-10px);

-o-transform:translate(0,-10px);

-ms-transform:translate(0,-10px);

}

上下左右移动

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。.a{transform:scale(1.5)}

比例

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.a{transform:translate(120px,0)}

变动，位移

继续阅读：CSS3

原创文章请注明转载自霍者博客本文地址：http://www.huozheweb.com/post/243.html，标题：CSS3详解：transform 的旋转、旋转放大、放大、移动