CSS 3D rotate with mouse move All In One

鼠標跟隨 CSS 3D 旋轉(zhuǎn)動畫

CSS perspective 3D demo ?

<section class="app">
  <div class="reverseRotate perspective-3d">
      <div class="rotateXZ perspective-3d">
          <div class="content pink">鼠標跟隨 CSS 3D 旋轉(zhuǎn)動畫</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 長度或?qū)挾纫恢?，防止拉伸變?*/

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

/*

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

*/ 

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

/*

rotateX(30deg) 旋轉(zhuǎn)度數(shù)必須小于 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 長度或?qū)挾纫恢?，防止拉伸變?/li>
2. rotateX 旋轉(zhuǎn)度數(shù)必須小于 45 deg

/*
perspective 大小與 box 長度或?qū)挾纫恢?，防止拉伸變?*/

.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 屬性設(shè)置元素的子元素是定位在 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 發(fā)布文章使用：只允許注冊用戶才可以訪問！

原創(chuàng)文章，版權(quán)所有??xgqfrms, 禁止轉(zhuǎn)載 ???，侵權(quán)必究??！