技术点：CSS3里的3D旋转实现这个效果需要对CSS3的3D旋转还有对JQuery有一定的认识，因为这是本效果具体使用到的技术；这里不去详细讲解这两个基础知识点，只讲具体实现思路以及实现代码。 我将这个会跟随变化的盒子分成四个区域，鼠标在进入这不同的四个区域时，会有不一样的效果，但它们的总体规律是相似的，这点在代码里会有体现。我们需要获取的值有这个盒子距离它父元素的top和left值，还有盒子
技术点：CSS3里的3D旋转
实现这个效果需要对CSS3的3D旋转还有对JQuery有一定的认识，因为这是本效果具体使用到的技术；这里不去详细讲解这两个基础知识点，只讲具体实现思路以及实现代码。
我将这个会跟随变化的盒子分成四个区域，鼠标在进入这不同的四个区域时，会有不一样的效果，但它们的总体规律是相似的，这点在代码里会有体现。我们需要获取的值有这个盒子距离它父元素的top和left值，还有盒子自身的width和height值，以及鼠标的位置坐标值。通过这几个值的计算，可以得到鼠标相对于这个盒子的坐标值，再根据这个坐标值去动态改变盒子的旋转角度方向与大小值。
以及上实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现动态旋转角度变化</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
perspective: 500px;/*这个是设置盒子的透视度*/
最低0.47元/天 解锁文章
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
