CSS 2D转换 transform

三、2D转换transform

Css3中 2d的转换：

属性：transform可以对元素进行移动、缩放、转动、拉长或拉伸。

translate( ,) 偏移方法

translate() 根据左(X轴) 和 顶部(Y轴) 位置给定的参数，从当前元素位置移动，可以取负值。

• 写法：
  transform:translate(x,y); 元素移动到指定的x和y值的交点处
transform:translateX(); 元素沿着x轴（水平方向）移动
transform:translateY(); 元素沿着y轴（垂直方向）移动
• 兼容写法：
  Safari and Chrome -webkit-transform:translate(30px,100px);
  IE 9 -ms-transform:translate(30px,100px);
  Firefox -moz-transform:translate(30px,100px);
  Opera -o-transform:translate(30px,100px);
  最后写标准的写法transform:translate(30px,100px);

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

div	{
	width:100px;
		height:75px;
		background-color:red;
		border:1px solid black;
	}
#div2{
		transform:translate(30px,50px);
		-ms-transform:translate(30px,50px);  IE 9 
		-webkit-transform:translate(30px,50px); */
	}
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

rotate() 旋转方法

• 使元素顺时针旋转设定的角度，可以取负值为逆时针旋转；
• 写法 transform:rotate(30deg);
• 兼容写法：
  -webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
transform:rotate(60deg);

div	{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
#div2{
	transform:rotate(30deg);
	-ms-transform:rotate(30deg);			
	-webkit-transform:rotate(30deg); 
}
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

scale( , ) 缩放方法

• 元素的尺寸会增加或减少到对应倍数，根据给定的倍数（x轴）和高度（y轴）参数；
• 写法：
  transform:scale(x,y);
Transform:scaleX();
Transform:scaleY();
• 例如：
  -webkit-transform:scale(2,3); //放大
  -webkit-transform:scaleX(2); // x轴放大到原来的2倍
  -webkit-transform:scaleY(3); // y轴放大到原来的3倍
  -webkit-transform:scaleX(0.5); // x轴缩小到原来的一半
  -webkit-transform:scaleY(0.5); // y轴缩小到原来的一半
• div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。

div {
	    margin: 150px;
	    width: 200px;
	    height: 100px;
	    background-color: yellow;
	    border: 1px solid black; 
	    -ms-transform: scale(2,3); /* IE 9 */
	    -webkit-transform: scale(2,3); /* Safari */
	    transform: scale(2,3); /* 标准语法 */
	}

扭曲( 倾斜 翻转 斜拉) skew( ）方法

• skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度 ;
• 倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
• 写法：
  transform:skew( xdeg,ydeg);
  transform:skewX( deg);
  transform:skewY( deg);
• 一个参数时：表示水平方向的倾斜角度；
• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
• transform:skewX(20deg); transform:skewY(30deg);

div{
	width:100px;
		height:75px;
		background-color:red;
		border:1px solid black;
}
#div2{
	transform:skew(30deg,20deg);
	-ms-transform:skew(30deg,20deg); 
	-webkit-transform:skew(30deg,20deg); 
}
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

4、360度旋转案例

img{
   width: 320px;
    height: 350px;
    display: block;
    margin: 40px auto;
    border-radius: 50%;
    border: #2e51ff solid 2px;
    transition: all 5s;          /*all来表示所有的属性都变化*/
}
img:hover{
    transform: rotate(360deg);
}

<img src="img/img1.jpg">

5、transform-origin

• 设置旋转元素的基点位置： transform-origin: 0% 0%;
  transform-origin
• 例：transform-origin:left top;
• transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
• 因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。