CSS练习3D的先旋转后移动和先移动后旋转的区别

transform:rotate()的旋转是指图片本身(原地转向)的旋转,不是图片整体方位的旋转,旋转以后图片的正方向Z轴会跟着图片的正方向变化。
两个例子(主要区别在注释里)

3D导航栏

!!先移动后旋转和先旋转后移动都可以,注意先旋转后方位会出现变化。
在这里插入图片描述在这里插入图片描述
结果:鼠标移动在导航栏上出现3D旋转。
在这里插入图片描述

3D旋转木马

采用先旋转后移动。如果先移动后旋转,就要先计算好如果采用旋转的新方位,再倒推需要移动的位置,以此位置设置移动距离,再旋转。也就是先想到结果,再倒推位移,记住,此时结果的方位坐标是变化了的。
在这里插入图片描述在这里插入图片描述
结果:在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部