CSS 3D rotate with mouse move All In One

鼠標跟隨 CSS 3D 旋轉動畫

CSS perspective 3D demo ?

<section class="app">
  <div class="reverseRotate perspective-3d">
      <div class="rotateXZ perspective-3d">
          <div class="content pink">鼠標跟隨 CSS 3D 旋轉動畫</div>
      </div>
  </div>
</section>

.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;
}

/*

`.rotateXZ`  與 @keyframes `rotateXZ` 同名了

*/ 

.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);
    }
}

注意事項

1. perspective 大小與 box 長度或寬度一致，防止拉伸變形
2. rotateX 旋轉度數必須小于 45 deg

/*
perspective 大小與 box 長度或寬度一致，防止拉伸變形
*/

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

@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);
    }
}

transform-style

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

transform-style CSS 屬性設置元素的子元素是定位在 3D 空間中還是在元素的平面中展平。

.flat {
  transform-style: flat;
}

.preserve-3d {
  transform-style: preserve-3d;
}

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有??xgqfrms, 禁止轉載 ???，侵權必究??！