阿坝州网站建设公司

css变形的属性有哪些

这篇“css变形的属性有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css变形的属性有哪些”文章吧。

创新互联主要从事网站设计制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务绥棱,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

css变形有6种属性:1、transform，向元素应用2D或3D转换；2、transform-origin，允许用户改变被转换元素的位置；3、transform-style，规定被嵌套元素如何在3D空间中显示；4、perspective，规定3D元素的透视效果；5、perspective-origin，规定3D元素的底部位置；6、backface-visibility。

本教程操作环境：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)

效果图：

css变形的属性有哪些

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 属性一同使用。

使用示例









旋转红色的DIV元素，尝试更改其X轴和Y轴：


  HELLO

Rotate:

transform: rotateY:(45deg);



X-axis:

Y-axis:
transform-origin: 20% 40%;
 

效果图：

css变形的属性有哪些

CSS3 transform-style属性

作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法：

transform-style: flat|preserve-3d;

flat：子元素将不保留其 3D 位置。

preserve-3d：子元素将保留其 3D 位置。

注：该属性必须与 transform 属性一同使用。

使用示例








  HELLO
  YELLOW
  

效果图：

css变形的属性有哪些

CSS perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法

perspective: number|none;
值描述
number元素距离视图的距离，以像素计。
none默认值。与 0 相同。不设置透视。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

使用示例：




 






  HELLO

 

css变形的属性有哪些

CSS3  perspective-origin属性

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective-origin: x-axis y-axis;
值描述
x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

  • left

  • center

  • right

  • length

  • %

y-axis

定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

  • top

  • center

  • bottom

  • length

  • %

使用示例：




 






  HELLO

 

css变形的属性有哪些

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 中有效。

效果图：

css变形的属性有哪些

以上就是关于“css变形的属性有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。


分享文章：css变形的属性有哪些
网页路径：http://azwzsj.com/article/igopps.html

其他资讯