本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。
css变形（转换）属性
(相关资料图)
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
CSS3 transform属性
作用：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法：
transform: none|transform-functions;
使用示例
rotate(45deg)
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)
scale(2)
scaleX(2)
scaleY(2)
skew(45deg, 45deg)
skewX(45deg)
skewY(45deg)
translate(45px)
translateX(45px)
translateY(45px)
matrix(2, 2, 0, 2, 45, 0)
效果图：
CSS3 transform-origin属性
作用：transform-origin 属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
语法：
transform-origin: x-axis y-axis z-axis;
| 值 | 描述 |
| x-axis | 定义视图被置于 X 轴的何处。可能的值： ● left ● center ● right ● length ● % |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值： ● top ● center ● bottom ● length ● % |
| z-axis | 定义视图被置于 Z 轴的何处。可能的值：length |
注：该属性必须与 transform 属性一同使用。
使用示例
<script>function changeRot(value){document.getElementById("div2").style.transform="rotate(" + value + "deg)";document.getElementById("div2").style.msTransform="rotate(" + value + "deg)";document.getElementById("div2").style.webkitTransform="rotate(" + value + "deg)";document.getElementById("div2").style.MozTransform="rotate(" + value + "deg)";document.getElementById("div2").style.OTransform="rotate(" + value + "deg)";document.getElementById("persp").innerHTML=value + "deg";}function changeOrg(){var x=document.getElementById("ox").value;var y=document.getElementById("oy").value;document.getElementById("div2").style.transformOrigin=x + "% " + y + "%";document.getElementById("div2").style.msTransformOrigin=x + "% " + y + "%";document.getElementById("div2").style.webkitTransformOrigin=x + "% " + y + "%";document.getElementById("div2").style.MozTransformOrigin=x + "% " + y + "%";document.getElementById("div2").style.OTransformOrigin=x + "% " + y + "%";document.getElementById("origin").innerHTML=x + "% " + y + "%"; }</script>旋转红色的DIV元素，尝试更改其X轴和Y轴：
HELLORotate:transform: rotateY:(45deg);
X-axis:
Y-axis:transform-origin: 20% 40%; 效果图：
CSS3 transform-style属性
作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
语法：
transform-style: flat|preserve-3d;
flat：子元素将不保留其 3D 位置。
preserve-3d：子元素将保留其 3D 位置。
注：该属性必须与 transform 属性一同使用。
使用示例
HELLOYELLOW
效果图：
CSS perspective属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
语法
perspective: number|none;
| 值 | 描述 |
|---|---|
| number | 元素距离视图的距离，以像素计。 |
| none | 默认值。与 0 相同。不设置透视。 |
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
使用示例：
HELLO
CSS3 perspective-origin属性
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
perspective-origin: x-axis y-axis;
| 值 | 描述 |
|---|---|
| x-axis | 定义该视图在 x 轴上的位置。默认值：50%。 可能的值： leftcenterrightlength% |
| y-axis | 定义该视图在 y 轴上的位置。默认值：50%。 可能的值： topcenterbottomlength% |
使用示例：
HELLO
CSS3 backface-visibility属性
作用：backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。
语法：
backface-visibility: visible|hidden;
visible：背面是可见的。
hidden：背面是不可见的。
注：只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持需使用-webkit-backface-visibility 属性替代。
使用示例
本例有两个 div 元素，均旋转 180 度，背向用户。
第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。
DIV 1第二个 div 元素的 backface-visibility 属性设置为 "visible"，所以是可见的。
DIV 2注释：本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。
效果图：
（学习视频分享：web前端）
以上就是css变形有几种属性的详细内容，更多请关注php中文网其它相关文章！
关键词： 透视效果
