css3 的变形属性 transform
它使得元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。
语法
transform: none | <transform-function> [<transform-function>]*
默认值
transform:none
兼容性
IE10+、FireFox16、Chrome36、Safari9、Opera12.1
CSS 3 2D 转换
CSS 3 rotate() 旋转
CSS 3 translate() 平移
CSS 3 scale() 缩放
CSS 3 skew() 扭曲或斜切
CSS 3 2D 旋转
语法
transform: rotate(<angle>)
参数说明
angle指旋转角度,正数表示顺时针旋转,负数表示逆时针旋转
如下,是使用rotate 制作一个看起来零落的照片集。
<head>
<title>旋转</title>
<meta charset="utf-8">
<style type="text/css">
* {margin: 0; padding: 0; list-style-type: none;}
body {font:12px/180% Arial;}
.main {width: 1000px; margin: 50px auto; position: relative;}
.pic {width: 300px;height: 290px;border:1px solid #ccc; background: #fff;
box-shadow: 2px 2px 3px #aaa}
.pic img {margin:10px 0 0 8px; width: 285px;}
.pic p {text-align: center;font-size: 20px;}
.pic1 {
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
.pic2 {
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.pic3 {
position: absolute; top: 40px; left: 350px; z-index: 4;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.pic4 {
position: absolute; top: 360px; left: 350px; z-index: 3;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.pic5 {
position: absolute; top: 150px; left: 600px; z-index: 4;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.pic6 {
position: absolute; top: 180px; left: 280; z-index: 5;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="main">
<div class="pic pic1"><img src="imgs/lion.png"><p>2D转换</p></div>
<div class="pic pic2"><img src="imgs/lion.png"><p>2D转换</p></div>
<div class="pic pic3"><img src="imgs/lion.png"><p>2D转换</p></div>
<div class="pic pic4"><img src="imgs/lion.png"><p>2D转换</p></div>
<div class="pic pic5"><img src="imgs/lion.png"><p>2D转换</p></div>
<div class="pic pic6"><img src="imgs/lion.png"><p>2D转换</p></div>
</div>
</body>
CSS 3 2D 转换
translate() 方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
三种情况
translateX(x) 仅水平方向移动
translateY(y) 仅垂直方向移动
translate(x,y) 水平和垂直方向同时移动
语法
transform: transformX(<translation-value>)
transform: tramsform(tx[,ty])
其以父容器的左上角为原点,远离原点为正。
<style type="text/css">
div {width: 1500px; height: 250px; background: #abcdef; margin:auto;}
div > img {
/*transform: translateX(200px);
transform: translateY(20px);*/
transform: translate(200px,100px);
}
</style>
</head>
<body>
<div>
<img src="imgs/lion.png">
</div>
</body>
css3 2d 转换
缩放 scale
scale() 方法,指定对象的2D scale
三种情况
scaleX(x) 元素仅水平方向缩放
scaleY(x) 元素仅竖直方向缩放
scale(x,y) 元素水平和竖直方向同时缩放
语法
transform: scaleX(<number>);
transform: scale()
<style type="text/css">
div {width: 1500px; height: 250px; background: #abcdef; margin:auto;}
div > img {
/*transform: translateX(200px);
transform: translateY(20px);*/
transform: scaleX(0.5);
transform: scale(0.3,0.3);
}
</style>
其中scale 缩放的原点为元素的中心。
css3 2d 转换
扭曲 skew
skew() 方法,指定对象skew transformation
三种情况
skewX(x) 元素仅水平方向扭曲变形
skewY(x) 元素仅竖直方向扭曲变形
skew(x,y) 元素水平和竖直方向同时扭曲变形
语法
transform: skewX(<angle>);
transform: skew()
其中,角度,可以从-90deg 到 90deg.相当于模运算的效果。
<style type="text/css">
div {width: 800px; height: 250px; background: #abcdef; margin:auto;}
div > img {
transform: scale(0.3,0.3) skewX(15deg);
}
</style>