CSS3 transform 属性
lanzhusiyu 2018-01-05
【兼容性：】兼容性测试基础环境为：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>.
相关推荐
sunshineboyleng 0喜欢 / 0评论 2020-07-08
impress 0喜欢 / 0评论 2020-05-11
yaodilu 0喜欢 / 0评论 2020-04-30
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 0喜欢 / 0评论 2020-04-14
福叔 0喜欢 / 0评论 2020-04-11
zjuwangleicn 0喜欢 / 0评论 2020-03-08
冰蝶 0喜欢 / 0评论 2020-03-01
somboy 0喜欢 / 0评论 2020-02-29
zengni 0喜欢 / 0评论 2020-02-23
wangjie 0喜欢 / 0评论 2020-02-22
tianzyc 0喜欢 / 0评论 2020-02-19
冰蝶 0喜欢 / 0评论 2020-02-16
lanzhusiyu 0喜欢 / 0评论 2020-02-03
lanzhusiyu 0喜欢 / 0评论 2020-01-12
MaureenChen 0喜欢 / 0评论 2020-01-01
jiedinghui 0喜欢 / 0评论 2019-12-27
wangjie 0喜欢 / 0评论 2019-12-24
zhanghao 0喜欢 / 0评论 2019-12-20
bertzhang 0喜欢 / 0评论 2019-12-14
impress 0喜欢 / 0评论 2019-12-13
ZillahV0 0喜欢 / 0评论 2016-08-27
CaiKanXP 0喜欢 / 0评论 2019-12-02
AlisaClass 0喜欢 / 0评论 2019-11-18
qianxiaona 0喜欢 / 0评论 2019-11-16
apolluo 0喜欢 / 0评论 2018-09-01
lanzhusiyu 0喜欢 / 0评论 2019-10-30
安辉 0喜欢 / 0评论 2019-10-30
waterv 0喜欢 / 0评论 2019-10-30
zengni 0喜欢 / 0评论 2019-10-29
zengni 0喜欢 / 0评论 2019-10-27
MaureenChen 0喜欢 / 0评论 2019-10-25
purecss 0喜欢 / 0评论 2015-07-22
懵懂听风雨 0喜欢 / 0评论 2015-11-12
沈宫新 0喜欢 / 0评论 2018-02-05
web开发 0喜欢 / 0评论 2018-02-05
whale 0喜欢 / 0评论 2019-09-07
走向WEB开发 0喜欢 / 0评论 2017-09-18
走向WEB开发 0喜欢 / 0评论 2018-02-18
yongquanx 0喜欢 / 0评论 2018-02-17
魄竹 0喜欢 / 0评论 2018-02-13
Dorissun 0喜欢 / 0评论 2018-02-20
wcssdu 0喜欢 / 0评论 2019-07-01
yongquanx 0喜欢 / 0评论 2019-07-01
yaodilu 0喜欢 / 0评论 2019-06-30
覆雪蓝枫 0喜欢 / 0评论 2019-06-30
yaodilu 0喜欢 / 0评论 2019-06-29
qiupu 0喜欢 / 0评论 2019-06-29
84483065 0喜欢 / 0评论 2019-03-25
liusure0 0喜欢 / 0评论 2018-02-20