Jadikan interaksi lebih jelas! Penggunaan CSS yang bijak untuk mencapai kesan putaran 3D mengikut tetikus

Artikel ini akan memperkenalkan kepada anda cara menggunakan CSS untuk mencapai kesan putaran 3D mengikut tetikus yang menarik, menjadikan interaksi lebih jelas, saya harap ia akan membantu semua orang.

Hari ini, sekumpulan rakan bertanyakan soalan, bagaimana untuk melaksanakan kesan interaksi berikut tetikus seperti yang ditunjukkan di bawah:

Analisis ringkas menunjukkan bahawa kesan interaktif ini terutamanya mempunyai dua teras:

• Dengan bantuan keupayaan CSS 3D

• Putaran elemen memerlukan dan Menggabungkan pergerakan tetikus

Artikel ini akan menerangkan cara menggunakan CSS tulen untuk mencapai kesan interaktif yang serupa, dan cara memulihkan kesan di atas dengan cepat dengan mengikat acara tetikus dengan JavaScript . [Pembelajaran yang disyorkan: tutorial video css]

CSS tulen untuk mencapai putaran 3D elemen

Cara melaksanakannya tanpa JavaScript, hanya CSS Apa tentang kesan putaran 3D yang serupa?

Sedikit helah yang dipanggil pembatalan putaran positif dan negatif atau pembatalan putaran positif dan negatif akan digunakan di sini. Pelik sangat namanya, nampak macam konsep matematik.

Dalam animasi, putaran ialah atribut yang sangat biasa digunakan

{
  transform: rotate(90deg);
}

Apakah yang akan berlaku jika kita menambah putaran dalam arah yang berbeza kepada elemen pada tahap yang berbeza?

Pertama, mari kita anggap senarionya Kami mempunyai lapisan struktur HTML:

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

Gayanya adalah seperti berikut:

.contentKod CSS adalah seperti berikut: .rotate.reverseRotateKita boleh mendapatkan animasi sedemikian (perhatikan bahawa imej di bawah ialah GIF, bukan PNG):

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

Hebat! Kerana satu berputar ke hadapan dan satu lagi secara terbalik, dan fungsi pelonggaran adalah sama, keseluruhan

masih kelihatan pegun! Ambil perhatian bahawa adalah sangat penting bahawa keseluruhan kekal.

Sesetengah pembaca akan mengutuk apabila melihat ini Pengarang, anda seorang yang terencat Jika anda berhenti, bukankah tiada animasi? Di manakah anda mendapat kemahiran animasi anda? .content.contentJangan risau! Walaupun ia kelihatan pegun, kedua-dua unsur moyang sebenarnya berputar! Ini mungkin kelihatan sebagai kesan tenang, tetapi di bawahnya sebenarnya adalah arus bawah. Menggunakan alat pembangun untuk memilih elemen nenek moyang paling luar adalah seperti ini:

Dalam kes ini, mari kita terus memikirkannya Jika saya menambah beberapa elemen lain pada elemen induk yang diputar, Apakah kesan animasi tersebut? Ia menarik untuk difikirkan.

Mula-mula, mari tambahkan transformasi CSS 3D pada elemen ini:

Kemudian, cuba ubah suai animasi putaran di atas dan tambahkan rotateX tambahan pada putaran dalam:

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

Kesannya seperti berikut:

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

Wah, ini perlu difahami dengan teliti. Memandangkan lapisan kandungan

adalah statik tetapi dua lapisan luar sebenarnya berputar, dengan menetapkan tambahan , ia bersamaan dengan menindih satu lagi animasi Memandangkan putaran ke hadapan dan belakang diimbangi, keseluruhan animasi hanya boleh dilihat Animasi berputar

menghasilkan kesan di atas.

.contentDengan cara ini, tanpa campur tangan JavaScript, kami mensimulasikan kesan 3D yang ditunjukkan dalam gambar tajuk. Sudah tentu, ini sahaja tidak mencukupi untuk dipautkan dengan pengguna Jika ia mesti digabungkan dengan pergerakan tetikus, kami memerlukan sedikit bantuan daripada JavaScript. rotateX(40deg)rotateX(40deg)

Gunakan Javascript untuk merealisasikan kesan putaran 3D mengikut tetikus

Matlamat kami adalah untuk mencapai kesan animasi sedemikian:

Di sini, kami sebenarnya mempunyai dua elemen teras:

Kawasan aktiviti tetikus

• Objek berputar itu sendiri

• Pergerakan tetikus dalam

  kawasan aktif tetikus
akan mempengaruhi putaran 3D

objek berputar itu sendiri

, dan arah putaran sebenarnya boleh diuraikan ke dalam Arah paksi-X dan arah paksi-Y. Mari kita lihat, andaikan struktur HTML kita adalah seperti berikut:

Dapatkan grafik sedemikian:

    <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 方向上的移动：

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

• 当鼠标在中心右侧连续移动，元素绕 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) ";
}

效果如下：

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

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

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

完整的代码，你可以戳这里：CodePen Demo -- CSS 3D Rotate With Mouse Move

（学习视频分享：web前端）

Atas ialah kandungan terperinci Jadikan interaksi lebih jelas! Penggunaan CSS yang bijak untuk mencapai kesan putaran 3D mengikut tetikus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!