旋转角度检查和测试,首要知识点

CSS3中3D综合使用及分析

2015/11/13 · CSS ·
3D

原稿出处: 百码山庄   

后天本人要和大家一块来学学3个酷炫的鼠标Hover效果。首要将会涉及到CSS3中3D效果的应用,以及在落到实处进程中我们应用到的局地简约的更换算法,小编会尽量以图解的款式让理论变得更易于精晓。废话不多说,大家先看一下末尾效果:Hover特效。打开连接,鼠标进入图片列表区域并活动鼠标,观望对应区域中内容浮层的浮动意义,注意:请使用高级浏览器预览(推荐Chrome浏览器)。

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width,user-scalable=no”
/>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
body,
html {
margin: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.wrap {
position: relative;
height: 100%;
}
.view,
.boxZ,
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation: 36s rotate infinite linear;
animation: 36s rotate infinite linear;
}
.box span {
position: absolute;
left: 50%;
top: 50%;
margin: -512px 0 0 -512px;
width: 1024px;
height: 1024px;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/*
背面,角度和父级的角度相对的面是背景
*/
}
.box span:nth-of-type(1) {
-webkit-transform: rotateY(0deg) translateZ(-510px);
transform: rotateY(0deg) translateZ(-511px);
background: url(img/neg-x.png) no-repeat;
}
.box span:nth-of-type(2) {
-webkit-transform: rotateY(90deg) translateZ(-511px);
transform: rotateY(90deg) translateZ(-511px);
background: url(img/neg-z.png) no-repeat;
}
.box span:nth-of-type(3) {
-webkit-transform: rotateY(180deg) translateZ(-511px);
transform: rotateY(180deg) translateZ(-511px);
background: url(img/pos-x.png) no-repeat;
}
.box span:nth-of-type(4) {
background: url(img/pos-z.png) no-repeat;
-webkit-transform: rotateY(270deg) translateZ(-511px);
transform: rotateY(270deg) translateZ(-511px);
}
.box span:nth-of-type(5) {
background: url(img/pos-y.png);
-webkit-transform: rotateX(-90deg) translateZ(-511px);
transform: rotateX(-90deg) translateZ(-511px);
}
.box span:nth-of-type(6) {
background: url(img/neg-y.png);
-webkit-transform: rotateX(90deg) translateZ(-511px);
transform: rotateX(90deg) translateZ(-511px);
}
/*
transform-origin z轴的装置,在ios下有包容难点
*/
#loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: #fff url(img/loading.gif) no-repeat center center;
}
</style>
</head>
<body>
<div id=”loading”></div>
<script type=”text/javascript”>
/* 检查和测试图片加载成功 */
(function(){
var imgData = [
“img/neg-x.png”,
“img/neg-y.png”,
“img/neg-z.png”,
“img/pos-x.png”,
“img/pos-y.png”,
“img/pos-z.png”
];
var nub = 0;
for(var i = 0; i < imgData.length; i++){
load(imgData[i]);
}
function load(url){
var img = new Image();
img.onload = function(){
nub++;
if(nub == imgData.length){
loading.style.display = “none”;
}
};
img.src = url;
}
})();
</script>
<div class=”wrap”>
<div class=”view”>
<div class=”boxZ”>
<div class=”box”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<script type=”text/javascript”
src=”js/m.touch.js”></script>
<script type=”text/javascript”>
(function(){
setPerspective();
window.addEventListener(‘resize’, function(e) {
setPerspective();
});
function setPerspective(){
var wrap = document.querySelector(‘.wrap’);
var view = document.querySelector(‘.view’);
var boxZ = document.querySelector(‘.boxZ’);
var deg =
45;//视野夹角(角度越小,看到的范围越广,角度越大,看到的界定越少);
var Z =
Math.round(Math.tan(deg*Math.PI/180)*wrap.clientHeight/2);//总括景深
wrap.style.perspective = wrap.style.WebKitPerspective = Z + “px”;
//距离景物距离不变,那看看的镜头大小就不变
css(view,”translateZ”,Z);
css(boxZ,”translateZ”,-100);
}
})();
(function(){
var box = document.querySelector(‘.box’);
css(box,”rotateX”,0);
css(box,”rotateY”,0);
window.addEventListener(‘deviceorientation’, function(e) {
var x = e.beta;
var y = e.gamma;
var z = e.alpha;
var rotateX = x – 90;
var rotateY = (y + z)%360;
if(rotateX > 60){
rotateX = 60;
} else if(rotateX <-60){
rotateX = -60;
}
css(box,”rotateX”,rotateX);
css(box,”rotateY”,-rotateY);
});
旋转角度检查和测试,首要知识点。})();
//
</script>
</body>
</html>

每日二个Js小demo之移动端全景图场景完成-全景装修图。首要知识点:css3,旋转角度检查和测试,全景图css3

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width,user-scalable=no”
/>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
body,
html {
margin: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.wrap {
position: relative;
height: 100%;
}
.view,
.boxZ,
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation: 36s rotate infinite linear;
animation: 36s rotate infinite linear;
}
.box span {
position: absolute;
left: 50%;
top: 50%;
margin: -512px 0 0 -512px;
width: 1024px;
height: 1024px;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/*
北侧,角度和父级的角度相对的面是背景
*/
}
.box span:nth-of-type(1) {
-webkit-transform: rotateY(0deg) translateZ(-510px);
transform: rotateY(0deg) translateZ(-511px);
background: url(img/neg-x.png) no-repeat;
}
.box span:nth-of-type(2) {
-webkit-transform: rotateY(90deg) translateZ(-511px);
transform: rotateY(90deg) translateZ(-511px);
background: url(img/neg-z.png) no-repeat;
}
.box span:nth-of-type(3) {
-webkit-transform: rotateY(180deg) translateZ(-511px);
transform: rotateY(180deg) translateZ(-511px);
background: url(img/pos-x.png) no-repeat;
}
.box span:nth-of-type(4) {
background: url(img/pos-z.png) no-repeat;
-webkit-transform: rotateY(270deg) translateZ(-511px);
transform: rotateY(270deg) translateZ(-511px);
}
.box span:nth-of-type(5) {
background: url(img/pos-y.png);
-webkit-transform: rotateX(-90deg) translateZ(-511px);
transform: rotateX(-90deg) translateZ(-511px);
}
.box span:nth-of-type(6) {
background: url(img/neg-y.png);
-webkit-transform: rotateX(90deg) translateZ(-511px);
transform: rotateX(90deg) translateZ(-511px);
}
/*
transform-origin z轴的设置,在ios下有兼容难题
*/
#loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: #fff url(img/loading.gif) no-repeat center center;
}
</style>
</head>
<body>
<div id=”loading”></div>
<script type=”text/javascript”>
/* 检查和测试图片加载成功 */
(function(){
var imgData = [
“img/neg-x.png”,
“img/neg-y.png”,
“img/neg-z.png”,
“img/pos-x.png”,
“img/pos-y.png”,
“img/pos-z.png”
];
var nub = 0;
for(var i = 0; i < imgData.length; i++){
load(imgData[i]);
}
function load(url){
var img = new Image();
img.onload = function(){
nub++;
if(nub == imgData.length){
loading.style.display = “none”;
}
};
img.src = url;
}
})();
</script>
<div class=”wrap”>
<div class=”view”>
<div class=”boxZ”>
<div class=”box”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<script type=”text/javascript”
src=”js/m.touch.js”></script>
<script type=”text/javascript”>
(function(){
setPerspective();
window.addEventListener(‘resize’, function(e) {
setPerspective();
});
function setPerspective(){
var wrap = document.querySelector(‘.wrap’);
var view = document.querySelector(‘.view’);
var boxZ = document.querySelector(‘.boxZ’);
var deg =
45;//视野夹角(角度越小,看到的限制越广,角度越大,看到的限量越少);
var Z =
Math.round(Math.tan(deg*Math.PI/180)*wrap.clientHeight/2);//总结景深
wrap.style.perspective = wrap.style.WebKitPerspective = Z + “px”;
//距离景物距离不变,那看看的镜头大小就不变
css(view,”translateZ”,Z);
css(boxZ,”translateZ”,-100);
}
})();
(function(){
var box = document.querySelector(‘.box’);
css(box,”rotateX”,0);
css(box,”rotateY”,0);
window.addEventListener(‘deviceorientation’, function(e) {
var x = e.beta;
var y = e.gamma;
var z = e.alpha;
var rotateX = x – 90;
var rotateY = (y + z)%360;
if(rotateX > 60){
rotateX = 60;
} else if(rotateX <-60){
rotateX = -60;
}
css(box,”rotateX”,rotateX);
css(box,”rotateY”,-rotateY);
});
})();
//
</script>
</body>
</html>

!DOCTYPE html html lang=”en” head meta name=”vi…

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width,user-scalable=no”
/>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
body,
html {
margin: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.wrap {
position: relative;
height: 100%;
}
.view,
.boxZ,
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation: 36s rotate infinite linear;
animation: 36s rotate infinite linear;
}
.box span {
position: absolute;
left: 50%;
top: 50%;
margin: -512px 0 0 -512px;
width: 1024px;
height: 1024px;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/*
北侧,角度和父级的角度相对的面是背景
*/
}
.box span:nth-of-type(1) {
-webkit-transform: rotateY(0deg) translateZ(-510px);
transform: rotateY(0deg) translateZ(-511px);
background: url(img/neg-x.png) no-repeat;
}
.box span:nth-of-type(2) {
-webkit-transform: rotateY(90deg) translateZ(-511px);
transform: rotateY(90deg) translateZ(-511px);
background: url(img/neg-z.png) no-repeat;
}
.box span:nth-of-type(3) {
-webkit-transform: rotateY(180deg) translateZ(-511px);
transform: rotateY(180deg) translateZ(-511px);
background: url(img/pos-x.png) no-repeat;
}
.box span:nth-of-type(4) {
background: url(img/pos-z.png) no-repeat;
-webkit-transform: rotateY(270deg) translateZ(-511px);
transform: rotateY(270deg) translateZ(-511px);
}
.box span:nth-of-type(5) {
background: url(img/pos-y.png);
-webkit-transform: rotateX(-90deg) translateZ(-511px);
transform: rotateX(-90deg) translateZ(-511px);
}
.box span:nth-of-type(6) {
background: url(img/neg-y.png);
-webkit-transform: rotateX(90deg) translateZ(-511px);
transform: rotateX(90deg) translateZ(-511px);
}
/*
transform-origin z轴的装置,在ios下有兼容难题
*/
#loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: #fff url(img/loading.gif) no-repeat center center;
}
</style>
</head>
<body>
<div id=”loading”></div>
<script type=”text/javascript”>
/* 检测图片加载成功 */
(function(){
var imgData = [
“img/neg-x.png”,
“img/neg-y.png”,
“img/neg-z.png”,
“img/pos-x.png”,
“img/pos-y.png”,
“img/pos-z.png”
];
var nub = 0;
for(var i = 0; i < imgData.length; i++){
load(imgData[i]);
}
function load(url){
var img = new Image();
img.onload = function(){
nub++;
if(nub == imgData.length){
loading.style.display = “none”;
}
};
img.src = url;
}
})();
</script>
<div class=”wrap”>
<div class=”view”>
<div class=”boxZ”>
<div class=”box”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<script type=”text/javascript”
src=”js/m.touch.js”></script>
<script type=”text/javascript”>
(function(){
setPerspective();
window.addEventListener(‘resize’, function(e) {
setPerspective();
});
function setPerspective(){
var wrap = document.querySelector(‘.wrap’);
var view = document.querySelector(‘.view’);
var boxZ = document.querySelector(‘.boxZ’);
var deg =
45;//视野夹角(角度越小,看到的界定越广,角度越大,看到的限制越少);
var Z =
Math.round(Math.tan(deg*Math.PI/180)*wrap.clientHeight/2);//总结景深
wrap.style.perspective = wrap.style.WebKitPerspective = Z + “px”;
//距离景物距离不变,那看看的画面大小就不变
css(view,”translateZ”,Z);
css(boxZ,”translateZ”,-100);
}
})();
(function(){
var box = document.querySelector(‘.box’);
css(box,”rotateX”,0);
css(box,”rotateY”,0);
window.addEventListener(‘deviceorientation’, function(e) {
var x = e.beta;
var y = e.gamma;
var z = e.alpha;
var rotateX = x – 90;
var rotateY = (y + z)%360;
if(rotateX > 60){
rotateX = 60;
} else if(rotateX <-60){
rotateX = -60;
}
css(box,”rotateX”,rotateX);
css(box,”rotateY”,-rotateY);
});
})();
//
</script>
</body>
</html>

预备

笔者们先来做一些预备工作,我们在知晓三维效果的时候,日常须求表明一下和谐的空间想象力,在二维的显示屏上观看三维的吃水(立体几何中的Z轴)。除此之外大家也急需理解部分骨干理论知识,比如透视点/观望点(perspective),比如远小近大等。当然大家还索要控制一丢丢简约的多少转换能力,依照变换进度中的一些数量,利用部分简短的数学换算公式,总计获得我们在遵循落实进程中需求的数量。再啰嗦一句:空间想象力是丰富主要的,好呢,那就够了!

意义分析

为了帮扶大家营造3个三维空间,大家未来共同来揣摩一下,正在读书本文的协调,你的肉眼距离荧屏是有肯定距离的,那个距离就一定于示例中的透视点(鼠标地方)到内容浮层的相距,只是案例为了做出内容区与背景之间的视差感,而将透视的终端定在了背景上,而背景相差内容层之间还有一定的偏离。能设想出那三者的涉及吗?透视点
– 内容浮层 –
背景,他们是有三个纵向深度的,就好像你的眼睛到显示器的离开。当大家移动大家的头将双眼靠近荧屏的一面包车型客车时候,你会发觉另一端的文字展现十分小(远小近大),而且看着比较为难,所以这一个时候大家会愿意旋转一下荧屏,让显示器正对咱们的眼睛,那就好比示例中鼠标移动到区域的单向,内容浮层发生小角度旋转,转向鼠标地方的动向同样(那里必要小心的是出现说法涉及X,Y三个方向)。

现行反革命大家将那么些模型从正中间剖开然后延Y轴转动90度,我们来分步看看两种不一样的境况:

状态一,没有内容层,眼睛直达背景:

澳门葡京 1

地方二,有内容层,但内容层不跟随观望点变化:

澳门葡京 2

事态三,有内容层,且内容层会基于观看点发生角度偏移:

澳门葡京 3

澳门葡京 ,由来,我们演示的静态模型基本上就展现达成了,唯一的区分在于,我们的案例中内容层的扭转角度并没达到与观察点始终垂直,不过也只是参数上的分化而已,上面我们因此3个完gif动画,看看内容层随观看点变化的全经过:

澳门葡京 4

有了那些模型,我们实现示例的时候就轻松多了。

打码

先是步,背景层和内容层布局(以单个容器为例)

XHTML

<div class=”wrap” id=”J_Wrap”> <!– 背景层 –> <div
class=”bg”> <img src=”imgs/bg.png”> </div> <!– 内容层
–> <div class=”up”> <img src=”imgs/text.png”>
</div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="wrap" id="J_Wrap">
    <!– 背景层 –>
    <div class="bg">
        <img src="imgs/bg.png">
    </div>
    <!– 内容层 –>
    <div class="up">
        <img src="imgs/text.png">
    </div>
</div>

接下来通过CSS样式,将他们层叠起来,并设置观望点距背景的偏离:

CSS

.wrap { position: relative; float: left; margin-top: 20px; margin-left:
20px; width: 400px; height: 600px; /*
观察点距离背景的离开为400像素,即图示中眼睛到浅橙竖线的偏离 */
perspective: 400px; /* 暗许眼睛的观看点在wrap的宗旨 */
perspective-origin: 50% 50%; overflow: hidden; } .wrap .up { position:
absolute; top: 0; left: 0; width: 100%; height: 100%; /* *
内容层距背景层80像素,内容层距眼睛近,看起来会变大 *
所以设置展现比例0.8,以保障内容展示完整 */ transform: scale(.8)
translateZ(80px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.wrap {
    position: relative;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    height: 600px;
    /* 观察点距离背景的距离为400像素,即图示中眼睛到黑色竖线的距离 */
    perspective: 400px;
    /* 默认眼睛的观察点在wrap的中心 */
    perspective-origin: 50% 50%;
    overflow: hidden;
}
.wrap .up {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*
     * 内容层距背景层80像素,内容层距眼睛近,看起来会变大
     * 所以设置显示比例0.8,以保证内容显示完整
     */
    transform: scale(.8) translateZ(80px);
}

其次步,分析鼠标移动进度中所需数据的计算公式:

大家先来看二个图例:

澳门葡京 5

图示已然十显著晰,可是看起来还有很多未知数。我们通晓在JS中,大家很不难获取到三个节点(容器)相对于浏览器可视区域左上角的相对坐标,所以[x1,
y1]实为已知。而容器中央地点正是容器的x、y坐标分别拉长容器本人宽高的百分之五十,即[x0,
y0]亦为已知。最后鼠标在运动进度中,大家能够透过事件目的自作者轻松取获得鼠标相对于浏览器左上角的坐标,很令人惊叹[x2,
y2]也足以获得,而尚不可见的[rx,
ry],笔者能够在其实使用中为她设定较为合理的值,所以已知多少代入公式,最终dx1,
dy1, rx0, ry0就很简单总结出来了。

其三步,理论结合实践,实践检验真理:

JavaScript

(function(){ var c = [], // center: 鼠标move区域焦点点坐标 m = [],
// mouseCoordinates: 鼠标当前职责坐标 w = [], // wrapCoordinates:
鼠标move区域左上角坐标 d = [3, 3]; // X/Y方向的最大扭转角度(deg)
document.getElementById(‘J_Wrap’).onmousemove = function(ev){
ev.preventDefault(); var _this = this, r, z; m[0] = ev.clientX +
window.scrollX; m[1] = ev.clientY + window.scrollY; w[0] =
_this.getBoundingClientRect().left + window.scrollX; w[1] =
_this.getBoundingClientRect().top + window.scrollY; c[0] = w[0] +
_this.offsetWidth / 2; c[1] = w[1] + _this.offsetHeight / 2; //
rotate:
依照当前鼠标地点相对于区域主题地方百分比总括出近年来X/Y方向的扭转角度(deg)
r = [-(c[0] – m[0]) / (c[0] – w[0]) * d[0], (c[1] –
m[1]) / (c[1] – w[1]) * d[1]]; // perspectiveOrigin:
视觉观看点相对于鼠标move区域左上角的百分比(0-1) p = [0.5 + (c[0] –
m[0]) / (c[0] – w[0]) * 0.5, 0.5 + (c[1] – m[1]) / (c[1] –
w[1]) * 0.5]; z = 80; _this.style[‘perspectiveOrigin’] = p[0]
* 100 + ‘%’ + ‘ ‘ + p[1] * 100 + ‘%’;
_this.getElementsByTagName(‘div’)[1].style[‘transform’] =
‘scale(.8) translateZ(‘ + Math.abs(z) + ‘px) rotateX(‘ + r[1] + ‘deg)
rotateY(‘ + r[0] + ‘deg)’; }; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(){
    var c = [], // center: 鼠标move区域中心点坐标
        m = [], // mouseCoordinates: 鼠标当前位置坐标
        w = [], // wrapCoordinates: 鼠标move区域左上角坐标
        d = [3, 3]; // X/Y方向的最大扭转角度(deg)
    document.getElementById(‘J_Wrap’).onmousemove = function(ev){
        ev.preventDefault();
        var _this = this, r, z;
        m[0] = ev.clientX + window.scrollX;
        m[1] = ev.clientY + window.scrollY;
        w[0] = _this.getBoundingClientRect().left + window.scrollX;
        w[1] = _this.getBoundingClientRect().top + window.scrollY;
        c[0] = w[0] + _this.offsetWidth / 2;
        c[1] = w[1] + _this.offsetHeight / 2;
        // rotate: 根据当前鼠标位置相对于区域中心位置百分比计算出当前X/Y方向的扭转角度(deg)
        r = [-(c[0] – m[0]) / (c[0] – w[0]) * d[0], (c[1] – m[1]) / (c[1] – w[1]) * d[1]];
        // perspectiveOrigin: 视觉观察点相对于鼠标move区域左上角的百分比(0-1)
        p = [0.5 + (c[0] – m[0]) / (c[0] – w[0]) * 0.5, 0.5 + (c[1] – m[1]) / (c[1] – w[1]) * 0.5];
        z = 80;
        _this.style[‘perspectiveOrigin’] = p[0] * 100 + ‘%’ + ‘ ‘ + p[1] * 100 + ‘%’;
        _this.getElementsByTagName(‘div’)[1].style[‘transform’] = ‘scale(.8) translateZ(‘ + Math.abs(z) + ‘px) rotateX(‘ + r[1] + ‘deg) rotateY(‘ + r[0] + ‘deg)’;
    };
})();

将数组r和数组p的总计进程与上海体育场所公式比较,是或不是一模一样,而图例中地方的d数组,大家应用前曾经将他钦命为了[3,
3],当然你也足以依照你的喜好钦命成你兴奋的数字,至此整个职能落到实处大旨就成功了。

整治与包装

前方的代码就算曾经落到实处了职能,可是代码编写可谓极不规范:随意的变量命名、完全没考虑代码复用性,未考虑多实例情形,鼠标移出后显得效果未平复等等。所以基本不也许用来生产环境,大家还要求对它略作加工:

JavaScript

(function(window, $){ var _default = { target: ‘.up’, deg: [3, 3],
translateZ: 80, scale: .8 }; $.fn.magicHover = function(cfg) { var
config = $.extend({}, _default, cfg), center = [], // center:
鼠标move区域宗旨点坐标 mouseCoord = [], // mouseCoordinates:
鼠标当前地点坐标 wrapCoord = [], // wrapCoordinates:
鼠标move区域左上角坐标 deg = config.deg; // X/Y方向的最大扭转角度(deg)
return this.each(function(idx, wrap){ $(wrap).on(‘mousemove’,
function(ev){ ev.preventDefault(); var _this = $(this), rotate;
mouseCoord[0] = ev.clientX + $(window).scrollLeft(); mouseCoord[1] =
ev.clientY + $(window).scrollTop(); wrapCoord[0] =
_this.offset().left; wrapCoord[1] = _this.offset().top; center[0]
= wrapCoord[0] + _this.width() / 2; center[1] = wrapCoord[1] +
_this.height() / 2; // rotate:
依据当前鼠标位置相对于区域基本岗位百分比揣摸出脚下X/Y方向的挽回角度(deg)
rotate = [-(center[0] – mouseCoord[0]) / (center[0] –
wrapCoord[0]) * deg[0], (center[1] – mouseCoord[1]) /
(center[1] – wrapCoord[1]) * deg[1]]; // perspectiveOrigin:
视觉阅览点相对于鼠标move区域左上角的百分比(0-1) perspectiveOrigin =
[0.5 + (center[0] – mouseCoord[0]) / (center[0] – wrapCoord[0])
* 0.5, 0.5 + (center[1] – mouseCoord[1]) / (center[1] –
wrapCoord[1]) * 0.5]; _this.css(‘perspectiveOrigin’,
perspectiveOrigin[0] * 100 + ‘%’ + ‘ ‘ + perspectiveOrigin[1] *
100 + ‘%’); _this.find(config.target).css(‘transform’, ‘scale(‘ +
config.scale + ‘) translateZ(‘ + Math.abs(config.translateZ) + ‘px)
rotateX(‘ + rotate[1] + ‘deg) rotateY(‘ + rotate[0] + ‘deg)’);
}).on(‘mouseout’, function(ev){ var _this = $(this);
_this.css(‘perspectiveOrigin’, ‘50% 50%’);
_this.find(config.target).css(‘transform’, ‘scale(‘ + config.scale + ‘)
translateZ(‘ + Math.abs(config.translateZ) + ‘px) rotateX(0)
rotateY(0)’); }); }); }; })(window, jQuery);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
(function(window, $){
    var _default = {
        target: ‘.up’,
        deg: [3, 3],
        translateZ: 80,
        scale: .8
    };
 
    $.fn.magicHover = function(cfg) {
        var config = $.extend({}, _default, cfg),
            center = [], // center: 鼠标move区域中心点坐标
            mouseCoord = [], // mouseCoordinates: 鼠标当前位置坐标
            wrapCoord = [], // wrapCoordinates: 鼠标move区域左上角坐标
            deg = config.deg; // X/Y方向的最大扭转角度(deg)
        return this.each(function(idx, wrap){
            $(wrap).on(‘mousemove’, function(ev){
                ev.preventDefault();
                var _this = $(this), rotate;
                mouseCoord[0] = ev.clientX + $(window).scrollLeft();
                mouseCoord[1] = ev.clientY + $(window).scrollTop();
                wrapCoord[0] = _this.offset().left;
                wrapCoord[1] = _this.offset().top;
                center[0] = wrapCoord[0] + _this.width() / 2;
                center[1] = wrapCoord[1] + _this.height() / 2;
                // rotate: 根据当前鼠标位置相对于区域中心位置百分比计算出当前X/Y方向的扭转角度(deg)
                rotate = [-(center[0] – mouseCoord[0]) / (center[0] – wrapCoord[0]) * deg[0], (center[1] – mouseCoord[1]) / (center[1] – wrapCoord[1]) * deg[1]];
                // perspectiveOrigin: 视觉观察点相对于鼠标move区域左上角的百分比(0-1)
                perspectiveOrigin = [0.5 + (center[0] – mouseCoord[0]) / (center[0] – wrapCoord[0]) * 0.5, 0.5 + (center[1] – mouseCoord[1]) / (center[1] – wrapCoord[1]) * 0.5];
                _this.css(‘perspectiveOrigin’, perspectiveOrigin[0] * 100 + ‘%’ + ‘ ‘ + perspectiveOrigin[1] * 100 + ‘%’);
                _this.find(config.target).css(‘transform’, ‘scale(‘ + config.scale + ‘) translateZ(‘ + Math.abs(config.translateZ) + ‘px) rotateX(‘ + rotate[1] + ‘deg) rotateY(‘ + rotate[0] + ‘deg)’);
            }).on(‘mouseout’, function(ev){
                var _this = $(this);
                _this.css(‘perspectiveOrigin’, ‘50% 50%’);
                _this.find(config.target).css(‘transform’, ‘scale(‘ + config.scale + ‘) translateZ(‘ + Math.abs(config.translateZ) + ‘px) rotateX(0) rotateY(0)’);
            });
        });
    };
})(window, jQuery);

而结尾调用的不二法门也13分不难:

JavaScript

$(function(){ $(‘.wrap’).magicHover({ target: ‘.up’, deg: [3, 3],
translateZ: 80 }); });

1
2
3
4
5
6
7
$(function(){
    $(‘.wrap’).magicHover({
        target: ‘.up’,
        deg: [3, 3],
        translateZ: 80
    });
});

最终,有八个比较迷惑的点正是CSS3筋斗(rotate)中的(rotateX、rotateY、rotateZ)是顶牛于坐标轴而言的,例使用rotateX时,实际是围绕X轴做旋转,变化的效劳效用在Y方向上,其他同理,所以仔细看以上代码,你会发觉在安装style的时候rotate中的x和y笔者刻意交流了岗位。你能够试行修改deg和translateZ参数,相比较一下浏览效果,更便于通晓里面包车型地铁规律!行呐,水到渠成,今儿清晨能够睡个安稳觉了~~

1 赞 1 收藏
评论

澳门葡京 6

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website