(鼠标跟踪)设计思维导图

先看一个简单的3D旋转效果例子：. 正面：鼠标移上去就开始旋转. 旋转中：这是旋转至背面的效果，以旋转并带半透明渐变的方式显示。. 背面：旋转后，为图像添加一些文字介绍元素，充实这个元素。. HTML代码. <div class="photo-container"> <div class="rotate-box"> <img src="winwall.jpg"/> <div class="text"> <h2>这是一个标题</h2> <p>这是一段图片相关的简介内容。.

HTML标签3D旋转(鼠标跟踪)

• HTML标签
  • div标签 id="element" class="rf"
    • 子div标签*10
      • 图像
• CSS样式表
  • body
    • * transform-style: preserve-3d; * perspective: 2920px;
  • .rf
    • * transform-style: preserve-3d; width: 128em; height: 57em; float: left; margin-left: -44px; transition: all 0.4s ease-out; margin-top: 0px;
• JavaScript代码
  • 定义一个常量: const multiple = 20;
  • 定义body: const mouseOverContatine = document.getElementsByTagName("body")[0];
  • 定义div标签: const element = document.getElement.ById("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); }); });
    • mouseOverContainer.addEventListener('mouseleave', (e) => { window.requestAnimationFrame(function(){ element.style.transform = "rotateX(0) rotateY(0)"; }); });
• 根据自己需要定义参数 注意:带" * "为必须样式