rotate3d指的是什么

发布时间:2021-03-10 14:26:23 作者:小新
来源:亿速云 阅读:222

这篇文章给大家分享的是有关rotate3d指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  rotate3d()CSS函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义;如果为正,运动将为顺时针,如果为负,则为逆时针。

  rotate3d是什么

  在3D空间之中,旋转有3个自由维度,描述了旋转轴。旋转轴由一组[x,y,z]矢量定义,并且通过变换源点传递(即通过transform-originCSS属性定义)。如果这些矢量被赋予非标准值,即3个坐标值的平方和不等于1时,它将会被内部隐式标准化。非标准矢量,例如空值和[0,0,0],将会使旋转不起作用,但是不影响整个CSS属性的其他效果(译者注:如transform中的多项变换)。

  与平面旋转相反的是,3D旋转的组合通常是不可交换的;这意味着定义旋转规则的值的顺序是严格控制的。

  语法

  rotate3d(x,y,z,a)

  值

  x

  <number>类型,可以是0到1之间的数值,表示旋转轴X坐标方向的矢量。

  y

  <number>类型,可以是0到1之间的数值,表示旋转轴Y坐标方向的矢量。

  z

  <number>类型,可以是0到1之间的数值,表示旋转轴Z坐标方向的矢量。

  a

  <angle>类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。

  笛卡尔坐标onℝ2 齐次坐标onℝℙ2 笛卡尔坐标onℝ3 齐次坐标onℝℙ3

  这种变换应用于3D空间,不可用于平面空间 1+(1-cos(a))(x2-1) z·sin(a)+xy(1-cos(a)) -y·sin(a)+xz·(1-cos(a)) -z·sin(a)+xy·(1-cos(a)) 1+(1-cos(a))(y2-1) x·sin(a)+yz·(1-cos(a))

  ysin(a)+xz(1-cos(a)) -xsin(a)+yz(1-cos(a)) 1+(1-cos(a))(z2-1) t

  0 0 0 1

  rotate3d示例

  绕Y轴旋转

  HTML
  <div>Normal</div>
  <divclass="rotated">Rotated</div>
  CSS
  body{
  perspective:800px;
  }
  div{
  width:80px;
  height:80px;
  background-color:skyblue;
  }
  .rotated{
  transform:rotate3d(0,1,0,60deg);
  background-color:pink;
  }

感谢各位的阅读!关于“rotate3d指的是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 线程指的是什么
  2. Redis指的是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

rotate3d

上一篇:如何在PHP中利用递归调用数组值

下一篇:怎么在destoon首页中调用求购供应信息的地区名称

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》