<h1>CSS 3D rotate with mouse move</h1>


<h2>CSS perspective 3D demo ✅</h2>

<section class="app">
  <div class="reverseRotate perspective-3d">
      <div class="rotateXZ perspective-3d">
          <div class="content pink">鼠标跟随 CSS 3D 旋转动画</div>
      </div>
  </div>
</section>


<section class="app">
  <div class="reverseRotate perspective-3d pink">
      <div class="rotateXZ perspective-3d green">
          <div class="content">鼠标跟随 CSS 3D 旋转动画</div>
      </div>
  </div>
</section>


<hr>

<h2>CSS perspective 3D bug ❌</h2>

<section class="app">
  <div class="reverseRotate perspective-3d-bug">
      <div class="rotateXZ perspective-3d-bug">
          <div class="content">鼠标跟随 CSS 3D 旋转动画</div>
      </div>
  </div>
</section>

<br>
<hr>

<h2>原理解析</h2>
<section class="app">
  <div class="reverseRotate outter-box">
      <div class="rotate inner-box">
          <div class="content">外层逆时针旋转 + 内层顺时针旋转 => 正负旋转相消</div>
      </div>
  </div>
</section>

<section class="app">
  <div class="reverseRotate-not outter-box">
      <div class="rotate inner-box">
          <div class="content heiglight">外层不旋转，内层顺时针旋转</div>
      </div>
  </div>
</section>


<section class="app">
  <div class="reverseRotate outter-box">
      <div class="rotate-not inner-box">
          <div class="content heiglight">外层逆时针旋转，内层不旋转</div>
      </div>
  </div>
</section>

* {
  box-sizing: border-box;
}

.app {
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.content {
  // background: pink;
  background: #ccc;
  width: 230px;
  height: 230px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.heiglight {
  color: #0f0;
}

.pink {
  background: pink;
  opacity: 0.9;
}
.green {
  background: green;
  margin: 10px;
  padding: 10px;
  border: 2px solid red;
  opacity: 0.7;
}

.outter-box {
    margin: 1px;
    border: 1px solid yellow;
}
.inner-box {
    margin: 1px;
    border: 1px solid red;
}

/*

*/ 

.rotate {
    animation: rotate 5s linear infinite;
}
.reverseRotate {
    animation: reverseRotate 5s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes reverseRotate {
    100% {
        transform: rotate(-360deg);
    }
}


/*
perspective 大小与 box 长度或宽度一致，防止拉伸变形
*/

.perspective-3d {
  transform-style: preserve-3d;
  perspective: 230px;
}

.perspective-3d-bug {
  transform-style: preserve-3d;
  perspective: 100px;
}

.rotateXZ {
    animation: rotateXZ 5s linear infinite;
}

/*

rotateX(30deg) 旋转度数必须小于 45 deg

*/ 
@keyframes rotateXZ {
    0% {
        transform: rotateX(0deg) rotateZ(0deg);
    }
    50% {
        transform: rotateX(30deg) rotateZ(180deg);
        // transform: rotateX(45deg) rotateZ(180deg);
        // transform: rotateX(90deg) rotateZ(180deg);
    }
    100% {
        transform: rotateX(0deg) rotateZ(360deg);
    }
}

/*

https://codepen.io/xgqfrms/pen/mdXbwbG?editors=1011

*/