CSS3+JS实现鼠标移动下的3D旋转特效

本资源是一份HTML和CSS3结合JavaScript实现的3D旋转特效示例，适用于IE10、IE11及Google浏览器。在HTML部分，我们看到一个简单的页面结构，包括一个id为"Contain"的div元素，设置了背景颜色和居中对齐，其样式定义了body背景为黑色，页面宽度为700px，高度为400px，并且不允许滚动。 CSS部分主要设置了容器（#Contain）的样式，使其成为一个蓝色背景的方形区域，鼠标悬停时，页面内容将发生变化。JavaScript部分是关键，通过`window.onload`事件确保在页面加载完成后执行。这里定义了一个名为`rotate3d`的函数，该函数获取id为"Contain"的div元素，并处理鼠标移动事件。 当鼠标在页面上移动时，函数首先计算鼠标相对于div元素中心的位置变化，然后将这些变化转换为旋转角度（rotX和rotY）。`event.clientX`和`event.clientY`用于获取鼠标在屏幕上的实际坐标，减去div元素中心坐标后除以10，得到整数旋转值，这些值用于控制div元素的3D旋转效果。 具体来说，`_eve.style.webkitTransform`或`_eve.style.transform`（针对不同的浏览器兼容性）会被设置为`rotateX(-rotXdeg) rotateY(-rotYdeg)`，实现了基于鼠标位置的实时3D旋转。这使得div元素在鼠标移动时，看起来像是围绕着一个虚拟的3D轴线进行旋转，创造出动态和交互性的视觉效果。 这个例子展示了如何利用HTML、CSS3的transform属性以及JavaScript来创建简单的3D交互效果，对于学习前端开发，尤其是处理CSS3动画和响应式设计具有一定的参考价值。同时，开发者可以根据需求调整旋转的速度、动画类型以及其他CSS样式，以实现更丰富的视觉体验。