PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

css变形有几种属性

原创2022-09-22 16:45:08382 + Vue前端学习QQ群(点击入群)

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

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

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

登录后复制

效果图:

1.gif

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%;
登录后复制

效果图:

1.gif

CSS3 transform-style属性

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

语法:

transform-style: flat|preserve-3d;
登录后复制

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

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

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

使用示例







HELLO
YELLOW
登录后复制

效果图:

1.jpg

CSS perspective属性

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

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

语法

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

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

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

使用示例:




 





HELLO
登录后复制

3.png

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
登录后复制

4.png

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

登录后复制

效果图:

1.jpg

(学习视频分享:web前端

以上就是css变形有几种属性的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐