一、前言

之前写过《CSS3 动画简单入门》,文章内容只是简单介绍 CSS3 动画属性的使用,并没有一个综合的案例演示,因此本章作为前者的内容补充。

下面简单介绍本章需要实现的 3D 效果:

当加载页面后,图片展示“摊牌”的效果,当鼠标点击页面左滑动或者右滑动时,图片会跟随左旋转或右旋转。当鼠标点击页面上滑动或下滑动时,可以改变观察图片的角度。

二、实现

# 2.1 布局

  1. <!DOCTYPE html>
  2. <html onselectstart="return false">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>3D相册</title>
  6. <link href="css/style.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div id="wrap" class="images">
  11. <img src="images/01.png" alt="">
  12. <img src="images/02.png" alt="">
  13. <img src="images/03.png" alt="">
  14. <img src="images/04.png" alt="">
  15. <img src="images/05.png" alt="">
  16. <img src="images/06.png" alt="">
  17. <img src="images/07.png" alt="">
  18. <img src="images/08.png" alt="">
  19. <img src="images/09.png" alt="">
  20. <img src="images/10.png" alt="">
  21. <img src="images/11.png" alt="">
  22. </div>
  23. </div>
  24. <script src="script/main.js"></script>
  25. </body>
  26. </html>

没有样式的效果图:

# 2.2 样式

style.css 文件内容:

  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }
  5. body {
  6. background-color: #000;
  7. }
  8. .container {
  9. perspective: 1500px;
  10. }
  11. .images {
  12. width: 100px;
  13. height: 100px;
  14. margin: 150px auto;
  15. position: relative;
  16. transform: rotateX(-20deg);
  17. transform-style: preserve-3d;/*切换 3D 效果*/
  18. }
  19. .images img {
  20. position: absolute;
  21. box-shadow: 0 0 8px #eee;
  22. }

添加样式的效果图:

图片被设置 position: absolute; 后,所有图片重叠在一起了。

# 2.3 事件

从演示图中我们可以看出,3D 效果可以分 2 个步骤:摊牌效果和图片旋转效果。

# 2.3.1 摊牌效果

所有图片分摊 360 度,设置其旋转角度即可。

main.js 文件内容:

  1. window.onload = function() {
  2. var wrap = document.getElementById("wrap");
  3. var images = document.getElementsByTagName("img");
  4. var length = images.length;
  5. var deg = 360 / length;
  6. for (var i = 0; i < length; i++) {
  7. images[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(240px)";
  8. images[length - i - 1].style.transition = "1s " + 0.2 * i + "s";
  9. }
  10. }

演示效果和动态图一样,此处省略。

所有图片包含在 div 中,当图片设置 rotateY 时,图片会以该 div 作为中心轴旋转。

图片还设置了 transition 属性,第一个参数表示过渡时间,第二个参数表示延迟时间。

# 2.3.2 旋转效果

实现图片旋转效果,只要改变中心轴的旋转角度即可。

main.js 文件完整内容:

  1. window.onload = function() {
  2. var wrap = document.getElementById("wrap");
  3. var images = document.getElementsByTagName("img");
  4. var length = images.length;
  5. var deg = 360 / length;
  6. for (var i = 0; i < length; i++) {
  7. images[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(240px)";
  8. images[length - i - 1].style.transition = "1s " + 0.2 * i + "s";
  9. }
  10. // 点击坐标
  11. var clickX, clickY;
  12. // 移动坐标
  13. var moveX, moveY;
  14. // 移动距离坐标
  15. var minusX, minusY;
  16. // 旋转角度
  17. var rotateX = 0,
  18. rotateY = -20;
  19. var timer = null;
  20. // 鼠标按下事件
  21. document.onmousedown = function(e) {
  22. clickX = e.clientX;
  23. clickY = e.clientY;
  24. // 鼠标移动
  25. this.onmousemove = function(e) {
  26. moveX = e.clientX;
  27. moveY = e.clientY;
  28. // 移动距离
  29. minusX = moveX - clickX;
  30. minusY = moveY - clickY;
  31. // 旋转角度,避免旋转太快故* 0.1
  32. rotateX += minusX * 0.1;
  33. rotateY -= minusY * 0.1;
  34. // 中心轴旋转
  35. wrap.style.transform = "rotateX(" + rotateY + "deg) rotateY(" + rotateX + "deg)"
  36. clickX = moveX;
  37. clickY = moveY;
  38. }
  39. // 鼠标释放
  40. this.onmouseup = function() {
  41. this.onmousemove = null;
  42. // 旋转惯性
  43. timer = setInterval(function() {
  44. minusX *= 0.99;
  45. minusY *= 0.98;
  46. // 旋转角度
  47. rotateX += minusX * 0.2;
  48. rotateY -= minusY * 0.1;
  49. // 中心轴旋转
  50. wrap.style.transform = 'rotateX(' + rotateY + 'deg) rotateY(' + rotateX + 'deg) ';
  51. if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
  52. clearInterval(timer);
  53. }
  54. }, 10);
  55. }
  56. }
  57. }

三、源码

rotate-photo-album