CSS3 transform 属性
【兼容性:】兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
CSS3 transform是什么?
transform的含义是:改变,使…变形;转换
CSS3 transform都有哪些常用属性?
transform的属性包括:rotate(旋转),skew(扭曲),scale(缩放),translate(平移) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
下面我们来分解各个属性的用法:
transform:rotate():
含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew():
含义:倾斜;
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。
【注意:缩放元素必须为块级元素】
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate():
含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
.demo_transform4{ -webkit-transform:translate(120px,0); -moz-transform:translate(120px,0); }
综合例子:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS 2D transform_CSS参考手册_web前端开发参考手册系列</title> <style> h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;} .test{zoom:1;width:700px;margin:0;padding:0;list-style:none;} .test li{float:left;margin:20px 30px 0 0;border:1px solid #000;} .test li p{width:300px;height:100px;margin:0;background:#ddd;} .test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);} .test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);} .test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);} .test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);} .test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);} .test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);} .test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);} .test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);} .test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);} .test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);} .test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);} .test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);} .test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);} </style> </head> <body> <h1>矩阵变换:matrix()</h1> <ul class="test"> <li class="matrix"> <p>transform:matrix(0,1,1,1,10,10)</p> </li> </ul> <h1>平移:translate(), translateX(), translateY()</h1> <ul class="test"> <li class="translate"> <p>transform:translate(5%,10px)</p> </li> <li class="translate2"> <p>transform:translate(-10px,-10px)</p> </li> <li class="translateX"> <p>transform:translateX(20px)</p> </li> <li class="translate3"> <p>transform:translate(20px)</p> </li> <li class="translateY"> <p>transform:translateY(10px)</p> </li> <li class="translate4"> <p>transform:translate(0,10px)</p> </li> </ul> <h1>旋转:rotate()</h1> <ul class="test"> <li class="rotate"> <p>transform:rotate(-15deg)</p> </li> <li class="rotate2"> <p>transform:rotate(15deg)</p> </li> </ul> <h1>缩放:scale()</h1> <ul class="test"> <li class="scale"> <p>transform:scale(.8)</p> </li> <li class="scale2"> <p>transform:scale(1.2)</p> </li> </ul> <h1>扭曲:skew()</h1> <ul class="test"> <li class="skew"> <p>transform:skew(-5deg)</p> </li> <li class="skew2"> <p>transform:skew(-5deg,-5deg)</p> </li> </ul> </body> </html>
.
相关推荐
冰蝶 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
走向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
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
福叔 2020-04-11