转换pb_CSS3 转换

转换

转换 transform分为2D、3D转换

它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

你可以使用 2D 或 3D 转换来转换元素。

2D转换

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

代码示例：

div
{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}

浏览器兼容

属性

1. translate()，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动：

div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:translate(50px,100px);
}

<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

2. rotate()，在一个给定度数顺时针旋转的元素。负值是允许的，元素逆时针旋转:

div
{
transform: rotate(30deg);
}

<div>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>

3. scale()，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    transform: scale(2,3);
}

<p>scale() 方法用于增加或缩小元素的大小。</p>
<div>
div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。
</div>

4. skew()

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:skew(30deg,20deg);
}

<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

5. matrix()

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能：

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

2D 转换方法总结

• matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
• translateX(n) 定义 2D 转换，沿着 X 轴移动元素
• translateY(n) 定义 2D 转换，沿着 Y 轴移动元素
• translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
• scaleX(n) 定义 2D 缩放转换，改变元素的宽度
• scaleY(n) 定义 2D 缩放转换，改变元素的高度
• scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度
• rotate(angle) 定义 2D 旋转，在参数中规定角度
• skewX(angle) 定义 2D 倾斜转换，沿着 X 轴
• skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴
• skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴

3D 转换

CSS3 允许使用 3D 转换来对元素进行格式化

浏览器兼容

属性

1. rotateX() 围绕其在一个给定度数X轴旋转的元素

div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
}

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>

2. rotateY() 方法

div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateY(130deg);
}

3D 转换方法总结

• translate3d(x,y,z) 定义 3D 转化
• translateX(x) 定义 3D 转化，仅使用用于 X 轴的值
• translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值
• translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值
• scale3d(x,y,z) 定义 3D 缩放转换
• scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值
• scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值
• scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值
• rotate3d(x,y,z,angle) 定义 3D 旋转
• rotateX(angle) 定义沿 X 轴的 3D 旋转
• rotateY(angle) 定义沿 Y 轴的 3D 旋转
• rotateZ(angle) 定义沿 Z 轴的 3D 旋转
• perspective(n) 定义 3D 转换元素的透视视图。