前端大本营

HTML5,CSS3,Responsive,资料站

perspective 说明

perspective属性,适用于要素的transform效果,3D的深度指定。 深度的值为数值,默认值为none。<设置元素被查看位置的视图> perspective属性值为none或是0以下的时候,变形的深度不适用。 基本和 transform:perspective()函数相同 , 只不过perspective属性作用于子要素不作用于自身。

属性值

none(默认值) 数值 变形的深度数值指定。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>perspective</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 {
-moz-perspe ctive:500;
-webkit-perspe ctive:500;
-o-perspe ctive:500;
-ms-perspe ctive:500;
}
p.prefix_sample1 img, p.prefix_sample2 img{
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
</style>

</head>

<body>
<p class="prefix_sample1">
perspe ctive:500;<br>
<img src="5.jpg">
</p>
<p class="prefix_sample2">
perspe ctive不指定<br>
<img src="5.jpg">
</body>
</html>
实例图  perspective
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | perspective 3D变形的深度指定 —— CSS3 参考 DIV变形已关闭评论

transform-style 说明

transform-style属性,指定子要素进行平面化还是立体化的时候使用。<使被转换的子元素保留其 3D 转换>

属性值

flat(默认值) 要素指定 transform-style:flat;时,其子要素进行平面化即2D描画。 preserve-3d 维持子要素立体空间中的个个位置进行3D描画。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transform-style</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 {
-moz-transform -style:flat;
-webkit-transform-style:flat;
-o-transform -style:flat;
-ms-transform- style:flat;
}
p.prefix_sample2 {
-moz-transform -style:preserve-3d;
-webkit-transform -style:preserve-3d;
-o-transform- style:preserve-3d;
-ms-transform- style:preserve-3d;
}
p.prefix_sample1 img, p.prefix_sample2 img {
-moz-transform: rotateZ(30deg);
-webkit-transform: rotateZ(30deg);
-o-transform: rotateZ(30deg);
-ms-transform: rotateZ(30deg);
}
</style>

</head>

<body>
<p class="prefix_sample1">
transform-style:flat;<br>
<img src="5.jpg">
</p>
<p class="prefix_sample2">
transform-style:preserve-3d;<br>
<img src="5.jpg">
</p>	
</body>
</html>
实例图  transform-style
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | transform-style 子要素平面化立体化指定 —— CSS3 参考 DIV变形已关闭评论

transform-origin 说明

transform-origin属性,指定2D变形,还有就是3D变形时的原点指定。<设置旋转元素的基点位置> 值可以1个也可以2个,2个值的时候中间用空格分隔,指定一个值的时候,第二个值自动设置成center,两个值指定时,第一个值为水平方向,第二个值为垂直方向。 值可以是百分数也可以是普通长度,2D变形前的要素的左上位置(0,0)向右下方向的距离指定。还有3D变形,变形前的要素的左上位置(0,0,0)向右下方向的距离指定。值可以为负数,负的百分比。

属性值

百分比 变形要素的左上位置(0%,0%)开始百分比指定。3D场合Z方向为长指定(默认值为 50%,50%,0) 长 变性要素的左上位置(0,0)开始距离指定。3D变形为左上位置(0,0,0)开始距离指定。 键值 水平方向 left,center,right, 垂直方向 top,center,bottom,3D时Z轴的距离指定。 默认值 2D 50%,50%, 3D 50%,50%,0。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transform-origin</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;} 
p.prefix_sample1 img, p.prefix_sample2 img{
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);	
}
p.prefix_sample2 img {
-moz-transform -origin:200px 150px;
-webkit-transform -origin:200px 150px;
-o-transform -origin:200px 150px;
-ms-transform -origin:200px 150px;
}
</style>

</head>

<body>
<p class="prefix_sample1">
rotate(-45deg),不指定transform-origin属性<br>
<img src="5.jpg">
</p>
<p class="prefix_sample2">
rotate(-45deg),transform-origin:right bottom的时候<br>
<img src="5.jpg">
</body>
</html>
实例图  transform-origin
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | transform-origin 2D变形3D变形原点 —— CSS3 参考 DIV变形已关闭评论

transform: perspective() 说明

perspective()函数,指定3D变形时的远近效果时使用。 其效果基本与 perspective属性相同。

属性值

perspective(n) 默认值 none。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>perspective</title>
<style>
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: per spective(200);
-webkit-transform: per spective(200);
-o-transform: per spective(200);
-ms-transform: per spective(200);

-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
p.prefix_sample2 img {
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
} 
</style>

</head>

<body>
<p class="prefix_sample1">
perspective(200)<br>
<img src="5.jpg">
</p>
</body>
</html>
实例图  perspective
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | perspective () – transform 3D变形的深度 —— CSS3 参考 DIV变形已关闭评论

transform: skew() 说明

skewX(),skewY(),skew()函数,都是指定要素倾斜变形时使用。

属性值

skew(X角度,Y角度) 根据指定的X,Y轴的两个角度进行倾斜变形。 第一个值为X轴倾斜。 第二个值为Y轴倾斜,第二个值可以省略,省略的时候,Y轴不倾斜。 skewX(角度) X轴以指定的角度进行倾斜。 skewY(角度) Y轴以指定的角度进行倾斜。 默认值 none。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>skew</title>
<style>
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-o-transform: skewX(20deg);
-ms-transform: skewX(20deg);
}
p.prefix_sample2 img {
-moz-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-o-transform: skewY(20deg);
-ms-transform: skewY(20deg);
}
p.prefix_sample3 img {
-moz-transform: skew(-20deg,-20deg);
-webkit-transform: skew(-20deg,-20deg);
-o-transform: skew(-20deg,-20deg);
-ms-transform: skew(-20deg,-20deg);
}
</style>

</head>

<body>
<p class="prefix_sample1">
skewX(20deg)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample2">
skewY(20deg)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample3">
skew(-20deg,-20deg)<br>
<img src="5.jpg">
</p>
</body>
</html>

实例图  skew
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | skew () – transform 要素倾斜变形 —— CSS3 参考 DIV变形已关闭评论

transform: rotate() 说明

rotate(),rotateX(),rotateY(),rotateZ(),rotate3d()函数,都是指定要素旋转时使用。 transform-origin属性同时指定的时候, 可以指定旋转中心。

属性值

rotate(角度) 根据指定的角度进行2D旋转。 rotateX(角度) 以X轴为轴顺时针旋转。 rotateY(角度) 以Y轴为轴顺时针旋转。 rotateZ(角度) 以Z轴为轴顺时针旋转。 rotate3d(n,n,n,角度) 使用三个数值指定3D旋转的向量。最后指定旋转角度,进行3D旋转。 默认值 none。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rotate</title>
<style>
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4, p.prefix_sample5 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
p.prefix_sample2 img {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
}
p.prefix_sample3 img {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
p.prefix_sample4 img {
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
}
p.prefix_sample5 img {
-moz-transform: rotate3d(1,0,0,180deg);
-webkit-transform: rotate3d(1,0,0,180deg);
-o-transform: rotate3d(1,0,0,180deg);
-ms-transform: rotate3d(1,0,0,180deg);
}
</style>

</head>

<body>
<p class="prefix_sample1">
rotate(-45deg)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample2">
rotate3d(1,0,0,180deg)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample3">
rotateX(180deg)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample4">
rotateY(180deg)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample5">
rotateZ(180deg)<br>
<img src="5.jpg">
</p>
</body>
</html>
实例图  rotate
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | rotate () – transform 要素旋转 —— CSS3 参考 DIV变形已关闭评论

transform: scale() 说明

scale(),scaleX(),scaleY(),scaleZ(),scale3d()函数,都是指定要素扩大缩小时使用。

属性值

scale(n,n) 使用两个数值指定2D缩放比例。 第一个值为X方向, 第二个值为Y方向的比例,第二个值可以省略,省略的时候和初值相同。 scaleX(n) X方向的缩放比例指定,Y方向和Z方向的比例为1。 scaleY(n) Y方向的缩放比例指定,X方向和Z方向的比例为1。 scaleZ(n) Z方向的缩放比例指定,X方向和Y方向的比例为1。 scale3d(n,n,n) 使用三个数值指定3D缩放比例。第一个值为X方向,第二个值为Y方向,第三个值为Z方向的比例。 默认值 none。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scale</title>
<style>
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4, p.prefix_sample5 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
}
p.prefix_sample2 img {
-moz-transform: scaleX(0.5);
-webkit-transform: scaleX(0.5);
-o-transform: scaleX(0.5);
-ms-transform: scaleX(0.5);
}
p.prefix_sample3 img {
-moz-transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
}
p.prefix_sample4 img {
-moz-transform: scaleZ(0.5);
-webkit-transform: scaleZ(0.5);
-o-transform: scaleZ(0.5);
-ms-transform: scaleZ(0.5);
}
p.prefix_sample5 img {
-moz-transform: scale3d(0.5,0.5,0.5);
-webkit-transform: scale3d(0.5,0.5,0.5);
-o-transform: scale3d(0.5,0.5,0.5);
-ms-transform: scale3d(0.5,0.5,0.5);
}
</style>

</head>

<body>
<p class="prefix_sample1">
scale(0.5,0.5)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample2">
scaleX(0.5)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample3">
scaleY(0.5)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample4">
scaleZ(0.5)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample5">
scale3d(0.5,0.5,0.5)<br>
<img src="../images/kaeru.gif">
</p>
</body>
</html>

实例图  scale
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | scale () – transform 要素扩大缩小 —— CSS3 参考 DIV变形已关闭评论

transform: translate() 说明

translate(),translateX(),translateY(),translateZ(),translate3d()函数,都是指定要素位置移动时使用。

属性值

translate(x,y) 通过指定X方向Y方向的距离来制定元素2D的移动。Y方向的距离值可以省略,省略的时候按照0来计算。 translateX(x) 指定X方向的移动距离。 translateY(y) 指定Y方向的移动距离。 translateZ(z) 指定Z方向的移动距离,translateZ()函数不能指定百分比的值,指定百分比的时候按照0来计算。 translate3d(x,y,z) 通过指定X方向Y方向Z方向的距离来指定元素3D的移动。Y方向和Z方向距离可以省略,省略的时候按照0来计算。 默认值 none。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>translate</title>
<style>
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4, p.prefix_sample5 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: translate(50px,20px);
-webkit-transform: translate(50px,20px);
-o-transform: translate(50px,20px);
-ms-transform: translate(50px,20px);
}
p.prefix_sample2 img {
-moz-transform: translateX(50px);
-webkit-transform: translateX(50px);
-o-transform: translateX(50px);
-ms-transform: translateX(50px);
}
p.prefix_sample3 img {
-moz-transform: translateY(20px);
-webkit-transform: translateY(20px);
-o-transform: translateY(20px);
-ms-transform: translateY(20px);
}
p.prefix_sample4 img {
-moz-transform: translateZ(10px);
-webkit-transform: translateZ(10px);
-o-transform: translateZ(10px);
-ms-transform: translateZ(10px);
}
p.prefix_sample5 img {
-moz-transform: translate3d(50px,20px,10px);
-webkit-transform: translate3d(50px,20px,10px);
-o-transform: translate3d(50px,20px,10px);
-ms-transform: translate3d(50px,20px,10px);
}
</style>

</head>

<body>
<p class="prefix_sample1">
translate(50px,20px)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample2">
translateX(50px)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample3">
translateY(20px)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample4">
translateZ(10px)<br>
<img src="5.jpg">
</p>

<p class="prefix_sample5">
translate3d(50px,20px,10px)<br>
<img src="5.jpg">
</p>
</body>
</html>
实例图  translate
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | translate () – transform 要素位置移动 —— CSS3 参考 DIV变形已关闭评论

transform: matrix3d() 说明

matrix3d()函数,对要素3D 变形时使用。matrix3d()函数利用行列来指定3D变形。 变形的规则需要指定16个值,如果matrix(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)的时候,坐标没有变化。 指定16个数值有些复杂的感觉,按照4×4分开考虑的话就简单多了。 matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ) 只X轴旋转 matrix3d( 1, 0, 0, 0, 0, Math.cos(角度), Math.sin(-角度), 0, 0, Math.sin(角度), Math.cos(角度), 0, 0, 0, 0, 1 ) 只Y轴旋转 matrix3d( Math.cos(角度), 0, Math.sin(角度), 0, 0, 1, 0, 0, Math.sin(-角度), 0, Math.cos(角度), 0, 0, 0, 0, 1 ) 只Z轴旋转 matrix3d( Math.cos(角度), Math.sin(-角度), 0, 0, Math.sin(角度), Math.cos(角度), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ) 只扩大缩小 matrix3d( sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1 ) 只平行移动 matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1 ) 还有,如果指定2D变形的时候,使用transform属性的 martix()函数。

属性值

marrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 默认值为none
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>matrix3d</title>
<style>
p.sample {background-color:limegreen;}
p.sample img {transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);}
</style>

</head>

<body>
<p class="sample">
matrix3d(<br>
2, 0.2, 0, 0, <br>
0, 0.5, 0, 0, <br>
0, 0, 4, 0, <br>
100, 50, 25, 1<br>
)<br>
<img src="5.jpg">
</p>
</p>
</body>
</html>
实例图  matrix3d 浏览器代码添加后代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>matrix3d</title>
<style>
p.prefix_sample {background-color:limegreen;}
p.prefix_sample img {
-moz-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
-webkit-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
-o-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
-ms-transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 100, 50, 25, 1);
}

</style>

</head>

<body>
<p class="prefix_sample">
matrix3d(<br>
2, 0.2, 0, 0, <br>
0, 0.5, 0, 0, <br>
0, 0, 4, 0, <br>
100, 50, 25, 1<br>
)<br>

<img src="5.jpg">
</p>
</p>
</body>
</html>
实例图 matrix3d
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | matrix3d () – transform 使用行列对要素进行3D变形 —— CSS3 参考 DIV变形已关闭评论

transform: matrix () 说明

matrix()函数,对要素2D 变形时使用。matrix()函数利用行列来指定2D变形。<方法把所有 2D 转换方法组合在一起> 变形的规则需要指定6个值,如果matrix(1,0,0,1,0,0)的时候,坐标没有变化。 还有,如果指定3D变形的时候,使用transform属性的 martix3d()函数。

属性值

marrix(n,n,n,n,n,n) 第一个数值 水平方向的缩放尺度 第二个数值 垂直方向的倾斜度 第三个数值 水平方向的倾斜度 第四个数值 垂直方向的缩放尺度 第五个数值 水平方向的移动距离 第六个数值 垂直方向的移动距离 默认值为none
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m a t r i x</title>
<style>
p.sample {background-color:limegreen;}
p.sample img {transform:m a t r i x(0.5, 0.2, 0, 0.5, 200, 50);}
</style>

</head>

<body>
<p class="sample">
matrix(0.5, 0.2, 0, 0.5, 200, 50)<br>
<img src="5.jpg">
</p>
</body>
</html>
实例图  matrix 浏览器代码添加后代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>matrix</title>
<style>
p.prefix_sample {background-color:limegreen;}
p.prefix_sample img {
-moz-transform: m a t r i x(0.5, 0.2, 0, 0.5, 200, 50);
-webkit-transform: m a t r i x(0.5, 0.2, 0, 0.5, 200, 50);
-o-transform: m a t r i x(0.5, 0.2, 0, 0.5, 200, 50);
-ms-transform: m a t r i x(0.5, 0.2, 0, 0.5, 200, 50);
}
</style>

</head>

<body>
<p class="prefix_sample">
m a t r i x(0.5, 0.2, 0, 0.5, 200, 50)<br>
<img src="5.jpg">
</p>
</body>
</html>

实例图
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 元素变形 | matrix () – transform使用行列对要素进行2D变形 —— CSS3 参考 DIV变形已关闭评论