CSS3 2D、3D转换

CSS3 2D、3D转换

一、CSS3 2D转换：

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2D变换的方法：translate()、rolate()、scale()、skew()、matrix()。

<style>

div

{

width:200px;

height:100px;

background-color:red;

/* Rotate div */

transform:rotate(30deg);

}

</style>

1、translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。translate(50px，100px)是从左边元素移动50个像素，并从顶部移动100个像素。

<style>

div

{

width:100px;

height:75px;

background-color:red;

border:1px solid black;

}

div#div2

{

transform:translate(50px,100px);

}

</style>

2、rolate()方法，在一个给定度数顺时针旋转的元素，负值是元素逆时针旋转。rolate(60deg)元素顺时针旋转60度。

<style>

div

{

width:100px;

height:75px;

background-color:grey;

border:1px solid black;

}

div#div2

{

transform:rotate(60deg);

-ms-transform:rotate(60deg); /* IE 9 */

-webkit-transform:rotate(60deg); /* Safari and Chrome */

}

</style>

3、scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。scale(2,3)转变宽度为原来的2倍大小、高度为原来的3倍大小。

<style>

div {

    margin: 150px;

    width: 200px;

    height: 100px;

    background-color: yellow;

    border: 1px solid black;

    border: 1px solid black;

    -ms-transform: scale(2,3); /* IE 9 */

    -webkit-transform: scale(2,3); /* Safari */

    transform: scale(2,3); /* 标准语法 */

}

</style>

4、skew()方法的语法：

transform:skew(<angle> [,<angle>]);包含两个参数，分别表示X轴和Y轴倾斜的角度。如果第二个参数为空，则默认为0，参数为负表示向相反的方向倾斜。

<style>

div

{

width:100px;

height:75px;

background-color:red;

border:1px solid black;

}

div#div2

{

transform:skew(30deg,20deg);

-ms-transform:skew(30deg,20deg); /* IE 9 */

-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */

}

</style>

5、matrix()方法有六个参数，包含旋转、缩放、移动和倾斜功能。

<style>

div

{

width:100px;

height:75px;

background-color:red;

border:1px solid black;

}

div#div2

{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

}

</style>

2D转换方法：

二、CSS3 3D转换：

1、rotateX()：围绕其在一个给定度数X轴旋转。

<style>

div

{

width:100px;

height:75px;

background-color:red;

border:1px solid black;

}

div#div2

{

transform:rotateX(120deg);

-webkit-transform:rotateX(120deg); /* Safari and Chrome */

}

</style>

2、rotateY()：围绕其在一个给定度数Y轴旋转。

<style>

div

{

width:100px;

height:75px;

background-color:red;

border:1px solid black;

}

div#div2

{

transform:rotateY(130deg);

-webkit-transform:rotateY(130deg); /* Safari and Chrome */

}

</style>

转换属性：

3D转换方法：