章节
问答
课签
笔记
评论
占位
占位

3D旋转特效(中)

通过rotateY设置的元素都会挤在同一个点上,需要拉开空间

三张图都在需要分布在不同的方向,呈现出一个圆形包围,这里可以采用translateZ处理。translateZ()函数是沿着垂直的Z轴方向平移,它可以让3D空间由前往后运作。假设自己作为观察者,观察着电脑屏幕上的某个元素,translateZ函数的正向值(越来越大的值)令元素更靠近观察者,负向值则远离观察者。

translateZ的计算公式

可以通过translateZ改变元素的透视距离,那么到底应该设置多少合适呢?

我们只需要求出边界到中心的距离,让3个图片围成一个圆形,那么每一个面的角度就是120°,长度是200px。换句话说一个面是有2个60°的直边三角形组成的。那么每一个直边三角形就是100px了,translateZ是直径距离,所以需要算出直边三角形的"邻边"距离

100 / Math.tan(60 / 180 * Math.PI) ≈ 57

实际上,我们会根据这个57px的距离会有一定的浮动,当然最终可以转化成rem去计算了

旋转原理

布局完成后旋转就比较简单了,只需要控制父节点的rotateY角度变化就可以了,注意因为是3张图,所以每次变化的角度应该是120°,这样才能保持每张图旋转的角度的正确性。具体可以参考右边代码的实现

任务

在index.html文件代码32中行填入任务代码

给id=spinner的元素设置rotateY属性, 角度是传入的angle变量,变化的时间是1秒

?不会了怎么办

        $("#spinner")
            .css({
                "transform": "rotateY(-" + angle + "deg)",
                "transition":"1s"
            })
            .css({
                "-moz-transform": "rotateY(-" + angle + "deg)",
                "-moz-transition":"1s"
            })

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?