3D旋转特效(中)，H5+JS+CSS3 实现圣诞情缘教程-慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

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"
            })

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <style type="text/css"> * { margin: 0; padding: 0; } </style> </head> <body> <div id="carousel" style="perspective: 500px; position: absolute; left: 6.8rem; top: 4.5rem;"> <figure id="spinner" style="width: 4rem; transform-style: preserve-3d;"> <figure style="width:4rem;transform:rotateY(0deg) translateZ(2.5rem);position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png" style="width:100%;height:100%;"></figure> <figure style="width:4rem;transform: rotateY(120deg) translateZ(2.5rem) scaleY(.9);position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e2960001f16314410901.png" style="width:100%;height:100%;"></figure> <figure style="width:4rem;transform: rotateY(240deg) translateZ(2.5rem) scaleY(.9);position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png" style="width:100%;height:100%;"></figure> </figure> </div> <button>点击旋转</button> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript"> var count = 0; var rotate = 120 var angle; $("button").on("click", function() { angle = (count++) * rotate + 360 //? }) //rem设置 ;(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //宽与高度 document.body.style.height = clientWidth * (900 / 1440) + "px" }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

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

6-4 3D旋转特效(中)