前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >transform 属性

transform 属性

作者头像
Html5知典
发布2019-11-26 17:09:59
1.3K0
发布2019-11-26 17:09:59
举报
文章被收录于专栏:Html5知典

用途

transform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对标签进行旋转、缩放、移动或倾斜。

语法

代码语言:javascript
复制
transform: none|transform-functions;

描述

none

规定不进行转换。

matrix()

规定 2D 转换,使用六个值的矩阵。

matrix3d()

规定 3D 转换,使用 16 个值的 4×4 矩阵。

translate()

规定平面(2D)上移动的元素的位置。这种转换的特点是坐标值定义多少它就在这个方向上移动。

translate3d()

规定 3D 转换。

translateX()

规定转换,只适用 X 轴的值。

translateY()

规定转换,只适用 Y 轴的值。

translateZ()

规定 3D 转换,只适用 Z 轴的值。

scale()

规定 2D 缩放转换。

scale3d()

规定 3D 缩放转换。

scaleX()

通过设置 X 轴的值来定义缩放转换。

scaleY()

通过设置 Y 轴的值来定义缩放转换。

scaleZ()

通过设置 Z 轴的值来定义 3D 缩放转换。

rotate()

规定 2D 旋转,在参数中规定角度。

rotate3d()

规定3D 旋转。

rotateX()

规定沿着 X 轴的 3D 旋转。

rotateY()

规定沿着 Y 轴的 3D 旋转。

rotateZ()

规定沿着 Z 轴的 3D 旋转。

skew()

规定沿着 X 和 Y 轴的 2D 倾斜转换。

skewX()

规定沿着 X 轴的 2D 倾斜转换。

skewY()

规定沿着 Y 轴的 2D 倾斜转换。

perspective()

为 3D 转换元素定义透视视图。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-10-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Html5知典 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档