CSS3 transform 简单使用
/* firefox & webkit 浏览器中有效 */
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color : #DEE4EE;
color : #305999;
width : 380px;
height : 70px;
line-height : 70px;
font-weight : bold;
text-align : center;
margin : 50px auto;
}
.rotate{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg)
}
.skew{
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg)
}
.scale{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5)
}
.translate{
-webkit-transform:translate(-100px,-30px);
-moz-transform:translate(-100px,-30px);
}
.animation {
-webkit-transition : all 1s ease-in-out;
-moz-transition : all 1s ease-in-out;
}
.multiple:hover {
-webkit-transform : rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);
-moz-transform : rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);
}
</style>
</head>
<body>
<div>transform(base)</div>
<div class="rotate">transform[旋转:rotate(10deg)]</div>
<div class="skew">transform[倾斜:skew(40deg)]</div>
<div class="scale">transform[缩放:scale(1.5)]</div>
<div class="translate">transform[位移:translate(-100px,-30px)]</div>
<div class="animation multiple">transform[animation]</div>
</body>
</html>[参考:http://www.daqianduan.com/css3-transform/]
相关推荐
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
AlisaClass 2019-11-18
zengni 2019-10-27
懵懂听风雨 2015-11-12
沈宫新 2018-02-05
lanzhusiyu 2018-01-05
走向WEB开发 2017-09-18
走向WEB开发 2018-02-18
yaodilu 2019-06-30
qiupu 2019-06-29
sunshineboyleng 2020-07-08
impress 2020-05-11
yaodilu 2020-04-30