當前位置：
首頁 > 知識 > CSS3 3D transform實現旋轉木馬效果

CSS3 3D transform實現旋轉木馬效果

知識 07-18

3D transform中有下面這幾個屬性：

  • rotateX(deg),rotateY(deg),rotateZ(deg)分別代表圍繞X軸，Y軸，Z軸旋轉。
  • translateX(px), translateY(px), translateZ(px)分別代表圍繞X軸，Y軸，Z軸位移。
  • transform-style: 使被轉換的子元素保留其 3D 轉換。
  • perspective：定義 3D 元素距視圖的距離，以像素計。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

旋轉木馬實現

1. 搭建舞台，加個視距 perspective: 600px;

  2. <style>
  3. .stage {
  4. height: 200px;
  5. width: 200px;
  6. margin: 0 auto;
  7. position: relative;
  8. margin-top: 300px;
  9. perspective: 600px;
  10. perspective-origin: 50%;
  11. }
  12. </style>
  13. <div class="stage"></div>

2. 添加容器，加個3D視圖聲明。

transform-style: preserve-3d;

3. 添加圖片，這裡用div代替圖片位置。我們讓所有圖片position:absolute，公用同一個中心點。

  2. .stage div.wrap {
  3. width: 100%;
  4. height: 100%;
  5. transform-style: preserve-3d;
  6. position: absolute;
  7. }
  8. .stage div.wrap div {
  9. width: 200px;
  10. height: 100%;
  11. background: #E00808;
  12. position: absolute;
  13. }
  14. .stage div.wrap div:nth-child(1) {
  15. background: #333;
  16. transform: rotateY(0deg);
  17. }
  18. .stage div.wrap div:nth-child(2) {
  19. background: #555;
  20. transform: rotateY(60deg);
  21. }
  22. .stage div.wrap div:nth-child(3) {
  23. background: #777;
  24. transform: rotateY(120deg);
  25. }
  26. .stage div.wrap div:nth-child(4) {
  27. background: #999;
  28. transform: rotateY(180deg);
  29. }
  30. .stage div.wrap div:nth-child(5) {
  31. background: #101010;
  32. transform: rotateY(240deg);
  33. }
  34. .stage div.wrap div:nth-child(6) {
  35. background: #001afe;
  36. transform: rotateY(300deg);
  37. }

4. 加上translateZ拉開空間

CSS3 3D transform實現旋轉木馬效果

上圖中紅色標註的r就是的demo頁面中圖片要translateZ的理想值（該值可以讓所有圖片無縫圍成一個圓）！

r的計算很簡單:

r = （div的一半寬度）/ Math.tan(角度 / 180 * Math.PI) 如上圖則 r = 64 / Math.tan(20 / 180 * Math.PI) = 175

因為我用了6個div，div寬度為200px，所以本例的 r 計算為

100 / Math.tan(30 / 180 * Math.PI) = 173

所以最終為：

  2. .stage div.wrap div {
  3. width: 200px;
  4. height: 100%;
  5. background: #E00808;
  6. position: absolute;
  7. }
  8. .stage div.wrap div:nth-child(1) {
  9. background: #333;
  10. transform: rotateY(0deg) translateZ(193px);
  11. }
  12. .stage div.wrap div:nth-child(2) {
  13. background: #555;
  14. transform: rotateY(60deg) translateZ(193px);
  15. }
  16. .stage div.wrap div:nth-child(3) {
  17. background: #777;
  18. transform: rotateY(120deg) translateZ(193px);
  19. }
  20. .stage div.wrap div:nth-child(4) {
  21. background: #999;
  22. transform: rotateY(180deg) translateZ(193px);
  23. }
  24. .stage div.wrap div:nth-child(5) {
  25. background: #101010;
  26. transform: rotateY(240deg) translateZ(193px);
  27. }
  28. .stage div.wrap div:nth-child(6) {
  29. background: #001afe;
  30. transform: rotateY(300deg) translateZ(193px);
  31. }

整合代碼

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>carousel</title>
  7. </head>
  8. <style>
  9. .stage {
  10. height: 200px;
  11. width: 200px;
  12. margin: 0 auto;
  13. position: relative;
  14. margin-top: 300px;
  15. perspective: 600px;
  16. perspective-origin: 50%;
  17. }
  18. .stage div.wrap {
  19. width: 100%;
  20. height: 100%;
  21. transform-style: preserve-3d;
  22. position: absolute;
  23. }
  24. .stage div.wrap div {
  25. width: 200px;
  26. height: 100%;
  27. background: #E00808;
  28. position: absolute;
  29. }
  30. .stage div.wrap div:nth-child(1) {
  31. background: #333;
  32. transform: rotateY(0deg) translateZ(193px);
  33. }
  34. .stage div.wrap div:nth-child(2) {
  35. background: #555;
  36. transform: rotateY(60deg) translateZ(193px);
  37. }
  38. .stage div.wrap div:nth-child(3) {
  39. background: #777;
  40. transform: rotateY(120deg) translateZ(193px);
  41. }
  42. .stage div.wrap div:nth-child(4) {
  43. background: #999;
  44. transform: rotateY(180deg) translateZ(193px);
  45. }
  46. .stage div.wrap div:nth-child(5) {
  47. background: #101010;
  48. transform: rotateY(240deg) translateZ(193px);
  49. }
  50. .stage div.wrap div:nth-child(6) {
  51. background: #001afe;
  52. transform: rotateY(300deg) translateZ(193px);
  53. }
  55. </style>
  56. <body>
  57. <div class="stage">
  58. <div class="wrap">
  59. <div></div>
  60. <div></div>
  61. <div></div>
  62. <div></div>
  63. <div></div>
  64. <div></div>
  65. </div>
  66. </div>
  67. </body>
  68. </html>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※spring+mybatis 實現多數據源切換
※Vue.js 2.0 漸進開發應用實踐

TAG:程序員小新人學習 |