CSS transform中rotate能不能實現以對角線為軸進行旋轉？

02-07

如圖中名為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 做矩陣變化的運算