transform

属性
transform 向元素应用 2D 或 3D 转换。
transform-origin 动画中心点。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

| matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 | |
| translate(x,y) | 定义 2D 转换。f=css_transform_translate) |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateY(y) | 定义转换,只是用 Y 轴的值。
| translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 | |
| scale(x,y) | 定义 2D 缩放转换。
| scale3d(x,y,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
| rotate(angle) | 定义 2D 旋转,在参数中规定角度。
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。
| perspective(n) | 为 3D 转换元素定义透视视图。 |

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Transforrm属性是控制2D或者3D元素的缩放,倾斜,移动,旋转 上面代码复制到html文件你大概会明白tr...
    九歌1阅读 1,105评论 0赞 0
  • 原文: 张鑫旭老师的 好吧,CSS3 3D transform变换,不过如此!。 参考资料:w3school ...
    iStorm阅读 1,868评论 0赞 0
  • 这一章,我准备详细介绍下 transform 这个属性。 我们先来看看其兼容性, Internet Explore...
    __越过山丘__阅读 2,788评论 0赞 0
  • CSS门槛低,无需程序基础或数学逻辑能力,也能做出点自我感觉不错的东西。然而,你自己也应该清楚的,一般你能轻松学到...
    果汁凉茶丶阅读 16,261评论 1赞 21
  • CSS3动画的属性主要分为三类:transform、transition以及animation。 Transfor...
    may_mico阅读 12,211评论 1赞 19

友情链接更多精彩内容