インタラクションをより鮮やかに！ CSS を巧みに使用してマウス追従 3D 回転効果を実現-CSSチュートリアル-php.cn

この記事では、CSS を使用してマウス追従の興味深い 3D 回転効果を実現し、インタラクションをより鮮やかにする方法を紹介します。

インタラクションをより鮮やかに！ CSS を巧みに使用してマウス追従 3D 回転効果を実現

#今日、友人のグループから、以下に示すマウス追従インタラクション効果を実装する方法について質問がありました。

簡単に分析すると、このインタラクティブなエフェクトには主に 2 つのコアがあります:

CSS 3D 機能を利用する
要素の回転には次のものが必要です。およびマウスの動きと組み合わせる

この記事では、純粋な CSS を使用して同様のインタラクティブな効果を実現する方法と、マウスイベントを JavaScript でバインドすることで上記の効果をすばやく復元する方法について説明します。 [推奨学習:

css ビデオチュートリアル ]

要素の 3D 回転を実現するための純粋な CSS

JavaScript を使用せずに CSS だけで実装する方法同様の 3D 回転効果について教えてください。

ここでは、

正負回転キャンセルまたは正負回転キャンセルと呼ばれる小技を使用します。そうですね、名前は非常に奇妙で、数学的な概念のようです。

アニメーションでは、回転は非常に一般的に使用される属性です。

{
  transform: rotate(90deg);
}

ログイン後にコピー

さまざまなレベルの要素にさまざまな方向の回転を追加するとどうなりますか?

まず、次のような HTML 構造のレイヤーがあるシナリオを想定します:

<div>
    <div>
        <div>正负旋转相消3D动画</div>
    </div>
</div>

ログイン後にコピー

スタイルは次のとおりです:

# #.content

がメインコンテンツです。親要素 .rotate が順方向の線形 360 度回転を実行すると、最も外側の親要素 .reverseRotate はどうなるかを想像してください。逆直線360°回転の影響でしょうか？ CSS コードは次のとおりです:

.rotate {
    animation: rotate 5s linear infinite;
}
.reverseRotate {
    animation: reverseRotate 5s linear infinite;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes reverseRotate {
    100% {
        transform: rotate(-360deg);
    }
}

ログイン後にコピー

このようなアニメーションを取得できます (下の画像は PNG ではなく GIF であることに注意してください):

＃＃＃＃＃＃魔法！一方は順方向に回転し、もう一方は逆方向に回転し、イージング関数は同じであるため、

.content 全体はまだ静止しているように見えます。

.content

全体が静止していることが非常に重要であることに注意してください。これを見た読者の中には悪口を言う人もいるでしょうが、作者さん、あなたは知恵遅れです、やめたらアニメ化はなくなってしまいますか？アニメーションのスキルはどこで得たのですか? ＃＃＃＃＃＃心配しないで！静止しているように見えますが、祖先の両方の要素は実際には回転しています。これは穏やかな効果のように見えるかもしれませんが、実際にはその根底に底流があります。開発者ツールを使用して最も外側の祖先要素を選択すると、次のようになります:

この場合、さらに考えてみましょう。親要素に他の要素を追加すると、回転すると、アニメーションの効果はどうなりますか?考えるのが楽しいです。

まず、これらの要素に CSS 3D 変換を追加しましょう:

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

ログイン後にコピー

次に、上記の回転アニメーションを変更し、内側の回転に追加の回転 X を追加してみます:

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateZ(0deg);
    }
    50% {
        transform: rotateX(40deg) rotateZ(180deg);
    }
    100% {
        transform: rotateX(0deg) rotateZ(360deg);
    }
}

ログイン後にコピー

効果は次のとおりです。

おお、ここはよく理解する必要があります。コンテンツ

.content

レイヤーは静的ですが、実際には外側の 2 つのレイヤーが回転しているため、追加の

rotateX(40deg) を設定することで、もう 1 つのアニメーションを重ね合わせるのと同じになります。逆回転はオフセットされ、アニメーション全体では、回転された

rotateX(40deg)

アニメーションのみが表示され、上記の効果が生成されます。このようにして、JavaScript を介さずに、タイトル画像に示されている 3D 効果をシミュレートします。もちろん、これだけではユーザーと連携することはできず、マウスの動きと組み合わせる必要がある場合には、JavaScript の助けが必要になります。 #JavaScript を使用して、マウスに追従する 3D 回転効果を実現します。

私たちの目標は、このようなアニメーション効果を実現することです:

##ここには、実際には 2 つのコア要素があります:

マウスアクティビティ領域

回転オブジェクト自体

マウスアクティブ領域
3D 回転に影響します
。回転方向は実際には次のように分解できます。 X軸方向とY軸方向。

    <div></div>

ログイン後にコピー

このようなグラフィックを取得します:

这里，body 的范围就是整个鼠标可活动区域，也是我们添加鼠标的 mousemove 事件的宿主 target，而 #element 就是需要跟随鼠标一起转动的旋转物体本身。

因为整个效果是需要基于 CSS 3D 的，我们首先加上简单的 CSS 3D 效果：

body {
    width: 100vw;
    height: 100vh;
    transform-style: preserve-3d;
    perspective: 500px;
}

div {
    width: 200px;
    height: 200px;
    background: #000;
    transform-style: preserve-3d;
}

ログイン後にコピー

效果如下：

没有什么不一样。这是因为还没有添加任何的 3D 变换，我们给元素添加 X、Y 两个方向的 rotate() 试一下（注意，这里默认的旋转圆心即是元素中心）：

div {
     transform: rotateX(15deg) rotateY(30deg);
}

ログイン後にコピー

效果如下，是有那么点意思了：

好，接下来，我们的目标就是通过结合 mouseover 事件，让元素动起来。

控制 X 方向的移动

当然，为了更加容易理解，我们把动画拆分为 X、Y 两个方向上的移动。首先看 X 方向上的移动：

インタラクションをより鮮やかに！ CSS を巧みに使用してマウス追従 3D 回転効果を実現

这里，我们需要以元素的中心为界：

当鼠标在中心右侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越大，范围为(0, +∞)deg
反之，当鼠标在中心左侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越小，范围为(-∞, 0)deg

这样，我们可以得到这样一个公式：

rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg

通过绑定 onmousemove 事件，我们尝试一下：

const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

mouseOverContainer.onmousemove = function(e) {
  let box = element.getBoundingClientRect();
  let calcY = e.clientX - box.x - (box.width / 2);
    
  element.style.transform  = "rotateY(" + calcY + "deg) ";
}

ログイン後にコピー

效果如下：

インタラクションをより鮮やかに！ CSS を巧みに使用してマウス追従 3D 回転効果を実現

好吧，旋转的太夸张了，因此，我们需要加一个倍数进行控制：

const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

mouseOverContainer.onmousemove = function(e) {
  let box = element.getBoundingClientRect();
  let calcY = (e.clientX - box.x - (box.width / 2)) / multiple;
    
  element.style.transform  = "rotateY(" + calcY + "deg) ";
}

ログイン後にコピー

通过一个倍数约束后，效果好了不少：

控制 Y 方向的移动

同理，我们利用上述的方式，同样可以控制 Y 方向上的移动：

const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

mouseOverContainer.onmousemove = function(e) {
  let box = element.getBoundingClientRect();
  let calcX = (e.clientY - box.y - (box.height / 2)) / multiple;
    
  element.style.transform  = "rotateX(" + calcX + "deg) ";
};

ログイン後にコピー

效果如下：

当然，在这里，我们会发现方向是元素运动的方向是反的，所以需要做一下取反处理，修改下 calcX 的值，乘以一个 -1 即可：

let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;

ログイン後にコピー

结合 X、Y 方向的移动

OK，到这里，我们只需要把上述的结果合并一下即可，同时，上面我们使用的是 onmousemove 触发每一次动画移动。现代 Web 动画中，我们更倾向于使用 requestAnimationFrame 去优化我们的动画，确保每一帧渲染一次动画即可。

完整的改造后的代码如下：

const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

function transformElement(x, y) {
  let box = element.getBoundingClientRect();
  let calcX = -(y - box.y - (box.height / 2)) / multiple;
  let calcY = (x - box.x - (box.width / 2)) / multiple;
  
  element.style.transform  = "rotateX("+ calcX +"deg) "
                        + "rotateY("+ calcY +"deg)";
}

mouseOverContainer.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    transformElement(e.clientX, e.clientY);
  });
});

ログイン後にコピー

至此，我们就能简单的实现题图所示的鼠标跟随 3D 旋转动效：

设置平滑出入

现在，还有最后一个问题，就是当我们的鼠标离开活动区域时，元素的 transform 将停留在最后一帧，正确的表现应该是复原到原状。因此，我们还需要添加一些事件监听做到元素的平滑复位。

通过一个 mouseleave 事件配合元素的 transition 即可。

div {
    // 与上述保持一致...
    transition: all .1s;
}

ログイン後にコピー

mouseOverContainer.addEventListener('mouseleave', (e) => {
  window.requestAnimationFrame(function(){
    element.style.transform = "rotateX(0) rotateY(0)";
  });
});

ログイン後にコピー

至此，我们就可以完美的实现平滑出入，整体效果最终如下：