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

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

3D导航栏

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

3D旋转木马

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

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值