css3 transform简介 2D

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>