当前位置:首页 > IT技术 > Web编程 > 正文

CSS 3D rotate with mouse move All In One
2022-04-29 13:55:17

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, 禁止转载 🈲️,侵权必究⚠️!


本文摘自 :https://www.cnblogs.com/

开通会员,享受整站包年服务立即开通 >