backface-visibility: hidden; 3D 翻转时，看不到背面

CSS3 中的transform-origin属性用于设置旋转元素的基点位置

  1. transform-origin: x-axis y-axis z-axis;
  2. /*默认值*/ 
  3. transform-origin: 50% 50% 0;

transform-style

CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。
如果选择平面，元素的子元素将不会有 3D 的遮挡关系。
由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它。

  1. /* Keyword values */
  2. transform-style: flat;
  3. transform-style: preserve-3d;
  5. /* Global values */
  6. transform-style: inherit;
  7. transform-style: initial;
  8. transform-style: unset;

image.png
image.png

元素按中心旋转

image.png

  1. <div class="avatar"></div>
  1. .avatar {
  2.   position: fixed;
  3.   left: 200px;
  4.   top: 200px;
  5.   width: 200px;
  6.   height: 200px;
  7.   background-color: blueviolet;
  8. }
  10. .avatar {
  11.   transform: rotate(45deg); // 按中心旋转45度
  12. }

元素按圆轨迹运动

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>css3</title>
  7. </head>
  9. <body>
  10.     <style>
  11.         .avatar {
  12.             position: fixed;
  13.             left: 200px;
  14.             top: 200px;
  15.             width: 400px;
  16.             height: 400px;
  17.             background-color: blueviolet;
  18.             border-radius: 100%;
  19.         }
  20.         @keyframes spin {
  21.             /* CSS3 角度单位 turn(圈) */
  22.             to{transform: rotate(1turn);}
  23.         }
  24.         .ani {
  25.             animation: spin 3s infinite linear;
  26.             transform-origin: 50% 195px;
  27.         }
  28.         .img {
  29.             position: absolute;
  30.             left: 180px;
  31.             top: 5px;
  32.             border-radius: 100%;
  33.             width: 40px;
  34.             height: 40px;
  35.             background-color: blue;
  36.         }
  37.     </style>
  39.     <div class="avatar">
  40.         <div class="img ani"></div>
  41.     </div>
  42. </body>
  44. </html>

跟着椭圆移动 position: absolute;

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>css3</title>
  7. </head>
  9. <body>
  10.     <style>
  11.         .avatar {
  12.             position: fixed;
  13.             left: 200px;
  14.             top: 200px;
  15.             width: 300px;
  16.             height: 200px;
  17.         }
  19.         .img {
  20.             position: absolute;
  21.             border-radius: 100%;
  22.             width: 40px;
  23.             height: 40px;
  24.             background-color: blue;
  25.         }
  27.         .item {
  28.             position: relative;
  29.             width: 100%;
  30.             height: 100%;
  31.             background-color: rgba(138, 43, 226, 1);
  32.             border-radius: 100%;
  33.         }
  34.     </style>
  36.     <div class="avatar">
  37.         <div class="item"></div>
  38.         <div class="img" id="img"></div>
  39.     </div>
  41.     <script>
  42.         // a 长半径， b 短半径，angle 角度，cx cy 圆心
  43.         function getCPoint(a, b, angle, cx = 0, cy = 0) {
  44.             index = angle
  46.             let x = a * Math.cos(Math.PI * 2 * index / 360)
  47.             let y = b * Math.sin(Math.PI * 2 * index / 360)
  48.             x = (x + cx);
  49.             y = (y + cy);
  51.             return {
  52.                 x, y
  53.             }
  54.         }
  56.         const avatar = document.querySelector('.avatar')
  57.         const div = document.getElementById('img')
  59.         let step = 360;
  61.         const loop = function (time, bool) {
  62.             if (step > 0 || bool) {
  63.                 step--;
  64.                 const posi = getCPoint(150, 100, step, 150 - 20, 100 - 20)
  65.                 div.style.left = posi.x + 'px';
  66.                 div.style.top = posi.y + 'px';
  68.                 setTimeout(() => {
  69.                     loop(time, bool);
  70.                 }, time || 100);
  71.             } 
  72.         }
  74.         loop(10, true);
  76.     </script>
  77. </body>
  79. </html>

跟着椭圆排列，使用 transform: translate(x, y)

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title>css3</title>
  7. </head>
  9. <body>
  10.     <style>
  11.         .avatar {
  12.             display: flex;
  13.             position: fixed;
  14.             left: 200px;
  15.             top: 200px;
  16.             width: 300px;
  17.             height: 200px;
  18.         }
  20.         .img {
  21.             flex: none;
  22.             z-index: 2;
  23.             border-radius: 100%;
  24.             width: 40px;
  25.             height: 40px;
  26.             background-color: blue;
  27.             display: flex;
  28.             justify-content: center;
  29.             align-items: center;
  30.             color: #fff;
  31.         }
  33.         .item {
  34.             position: absolute;
  35.             width: 100%;
  36.             height: 100%;
  37.             background-color: rgba(138, 43, 226, 1);
  38.             border-radius: 100%;
  39.         }
  40.     </style>
  42.     <div class="avatar">
  43.         <div class="item"></div>
  44.         <div class="img">1</div>
  45.         <div class="img">2</div>
  46.         <div class="img">3</div>
  47.         <div class="img">4</div>
  48.         <div class="img">5</div>
  49.         <div class="img">6</div>
  50.         <div class="img">7</div>
  51.         <div class="img">8</div>
  52.         <div class="img">9</div>
  53.         <div class="img">10</div>
  54.         <div class="img">11</div>
  55.         <div class="img">12</div>
  56.     </div>
  58.     <script>
  59.         // a 长半径， b 短半径，angle 角度，cx cy 圆心
  60.         function getCPoint(a, b, angle, cx = 0, cy = 0) {
  61.             index = angle
  63.             let x = a * Math.cos(Math.PI * 2 * index / 360)
  64.             let y = b * Math.sin(Math.PI * 2 * index / 360)
  65.             x = (x + cx);
  66.             y = (y + cy);
  68.             return {
  69.                 x, y
  70.             }
  71.         }
  73.         const avatar = document.querySelector('.avatar')
  74.         let divs = document.querySelectorAll('.img')
  75.         divs = Array.prototype.slice.call(divs)
  76.         console.log(divs.forEach, divs.length)
  77.         for (let i = 0; i < divs.length; i+=1) {
  78.             const item = divs[i];
  80.             console.log(item.offsetLeft, item.offsetTop)
  83.             const {x, y} = getCPoint(150, 100, (360 / divs.length)  * i, 130, 80);
  84.             console.log(x, y)
  85.             // item.style.left = x + 'px';
  86.             // item.style.top = y + 'px';
  87.             item.style.transform = `translate(${x - item.offsetLeft}px, ${y - item.offsetTop}px)`
  88.         }
  89.     </script>
  90. </body>
  92. </html>