如何使用2D/3D 转换属性(Transform)

 时间:2026-02-15 05:18:11

1、代码应用。从这个代码可以看出来,我们要用到参数 rotate,我们还要设定一定的数值,这样就让元素处于一个运动之后的状态。

div{transform:rotate(4deg);-ms-transform:rotate(4deg); /* IE 9 */-moz-transform:rotate(4deg); /* Firefox */-webkit-transform:rotate(4deg); /* Safari 和 Chrome */-o-transform:rotate(4deg); /* Opera */}

如何使用2D/3D 转换属性(Transform)

2、transform 在不同的浏览器需要加上不同的前缀。

IE 9  -ms-transform 属性

Safari 和 Chrome   -webkit-transform 

如何使用2D/3D 转换属性(Transform)

3、transform 的用法。transform的默认值是 none

transform的继承性是 no

transform 的版本是  CSS3

如何使用2D/3D 转换属性(Transform)

4、java 的语法 object.style.transform="rotate(88deg)"

也是需要一个 rotate 再加一个 数值。

如何使用2D/3D 转换属性(Transform)

5、语法。transform: none|transform-functions;

其实,这个 transform-functions 有很多种的可能。

如何使用2D/3D 转换属性(Transform)

6、matrix(n,n,n,n,n,n)  这就是在一个2D范围内进行各种的转换。

translate(x,y) 这也是2D转换  translate3d(x,y,z)  这是3D转换。

scale3d(x,y,z)  这是一个3D范围内的缩放。

rotate3d(x,y,z,angle)  这是一个3D范围内的旋转。

skew(x-angle,y-angle)  这是一个2D轴的倾斜变换。

如何使用2D/3D 转换属性(Transform)

  • 如何在Dream Weaver CS5中生成网络站点
  • [安卓app]大家来找茬游戏新手指南
  • Fireworks中的重置/克隆工具使用方法
  • Dreamweavercs6安装教程
  • Photoshop CS6怎么打造邮票效果?
  • 热门搜索
    数学手抄报内容六年级 有关于环保的手抄报 读书月手抄报 科学手抄报的资料 珍惜时间手抄报 小学生法制手抄报资料 安全健康手抄报 防火手抄报资料 关于勤俭节约的手抄报 手抄报安全伴我行