CSS transform中rotate能不能实现以对角线为轴进行旋转?
程序员文章站
2022-04-19 17:05:15
...
如图中名为in的div,用rotate以AD为轴进行“斜的旋转”可以实现吗?
我进行的尝试,transform-origin属性好像只能将坐标轴进行偏移但没办法令其旋转,所以旋转的轴都是水平或者垂直的...rotateX()和rotateY()的搭配也不太可行...
要怎么样才能实现这种旋转?
你的需求和origin并没有直接的关系。
就在你当前页改的哦:
结果:
前三个是(x,y,z)矢量坐标, 第四个是角度
而且,既然transform是支持matrix函数的,理论上是可以应用任意三维变换的,同学你思维不用停留在css提供的便利函数。
你甚至也可以不使用transform而使用别的css属性配合矩阵运算来实现3d,就更灵活了,安利下之前做的DEMO
GitHub - leeluolee/clip3d: 3D rendering with css:clip-path
当然实用性目前接近0 谢邀
用rotate3d(1,1,0,xxdeg) xx是角度值 对于这种情形,你应该使用 matrix3d 做矩阵变化的运算
我进行的尝试,transform-origin属性好像只能将坐标轴进行偏移但没办法令其旋转,所以旋转的轴都是水平或者垂直的...rotateX()和rotateY()的搭配也不太可行...
要怎么样才能实现这种旋转?
回复内容:
谢邀,你的需求和origin并没有直接的关系。
就在你当前页改的哦:
结果:
前三个是(x,y,z)矢量坐标, 第四个是角度
而且,既然transform是支持matrix函数的,理论上是可以应用任意三维变换的,同学你思维不用停留在css提供的便利函数。
你甚至也可以不使用transform而使用别的css属性配合矩阵运算来实现3d,就更灵活了,安利下之前做的DEMO
GitHub - leeluolee/clip3d: 3D rendering with css:clip-path
当然实用性目前接近0 谢邀
用rotate3d(1,1,0,xxdeg) xx是角度值 对于这种情形,你应该使用 matrix3d 做矩阵变化的运算
上一篇: 微信二维码生成
下一篇: php插入排序的实现代码