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

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

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

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

3D旋转特效(上)

3D旋转特效的实现也是很简单的，开发者可以有许多种方式来实现它，高级浏览器支持实现3D空间的能力，所以这里直接采用了css3来实现。3D旋转特效的所有代码全部用JS封装好了，参考右边代码区域。

实现原理：

先看结构，因为是3D视角所以在结构上需有一个透视参考点，也就是舞台节点上设置perspective，然后在容器父节点上设置preserve-3d属性，下面就是最基本的结构

舞台
    容器
        图片
        图片
        图片

节点#carousel中有3个面，其中有2个面是有侧旋转的立体效果，这里可以通过rotateY的设置达到这个效果，旋转的面是平均分布的，那么每个面需要在上一个面的基础上多旋转120度（360 / 3）

transform:rotateY(0deg)
transform:rotateY(120deg)
transform:rotateY(240deg)

给3个面设置不同rotateY值的实际效果，通过增加与删除preserve-3d设置后的效果对比，比较直观

去掉preserve-3d后，如下图

增加preserve-3d后，如下图

其实上图的基本布局效果已经出来了，但是因为元素都旋转是以自身的中心点为参考点，默认下中心点都是在正中间，所以感觉都是在一个范围区域变化

下一节将要学习如何拉开3d距离

任务

请在index.html文件代码16行出填出任务代码

设置舞台元素的透视点为500

?不会了怎么办: perspective: 500px;

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 style=" position: absolute; left: 6.8rem; top: 3.5rem;"> <h6>去掉preserve-3d后，如下图</h6> <figure style="width: 4rem; transition: 1s;"> <figure style="width:100%;transform:rotateY(0deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(120deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e2960001f16314410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(240deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png" style="width:100%;height:100%;"></figure> </figure> </div> <div style=" position: absolute; left: 6.8rem; top: 15.5rem;"> <h6>增加preserve-3d后，如下图</h6> <figure style="width: 4rem; transform-style: preserve-3d; transition: 1s;"> <figure style="width:100%;transform:rotateY(0deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(120deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e2960001f16314410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(240deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png" style="width:100%;height:100%;"></figure> </figure> </div> <script type="text/javascript"> //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-3 3D旋转特效(上)