这节课, 牛逼在 六面体的运动,变化, 用的都是 css3的,
关键是 class类名用得非常6
配合之前学的公式导出鼠标位置判断, 就能做出来效果了
<html>
<head>
<meta charset="UTF-8"/>
<title>几何体翻转</title>
<style type="text/css">
.wrapper {
width: 400px;
height: 400px;
perspective: 300px;
border: 1px solid black;
}
.item{
width: 100px;
height: 100px;
transform-style: preserve-3d;
margin: 100px auto;
position: relative;
transition: transform 1s;
transform-origin: 50% 50% -50px;
}
.front{
width: 100%;
height: 100%;
position: absolute;
background: #f00;
}
.back{
background: #ff0;
width: 100%;
height: 100%;
position: absolute;
text-align: right;
transform: translateZ(-1px);
}
.in-top .back,.out-top .back{
transform-origin: 0% 100%;
transform: translateY(-100%) rotateX(90deg);
}
.in-top.item{
animation: intop 0.5s forwards;
}
.out-top.item{
animation: outtop 0.5s forwards;
}
.in-left .back,.out-left .back{
transform-origin: 100% 0%;
transform: translateX(-100%) rotateY(-90deg);
}
.in-left.item{
animation: inleft 0.5s forwards;
}
.out-left.item{
animation: outleft 0.5s forwards;
}
.in-right .back,.out-right .back{
transform-origin: 0% 0%;
transform: translateX(100%) rotateY(90deg);
}
.in-right.item{
animation: inright 0.5s forwards;
}
.out-right.item{
animation: outright 0.5s forwards;
}
.in-bottom .back,.out-bottom .back{
transform-origin: 0% 0%;
transform: translateY(100%) rotateX(-90deg);
}
.in-bottom.item{
animation: inbottom 0.5s forwards;
}
.out-bottom.item{
animation: outbottom 0.5s forwards;
}
@keyframes inbottom{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(90deg);
}
}
@keyframes outbottom{
from{
transform: rotateX(90deg);
}
to{
transform: rotateX(0deg);
}
}
@keyframes inright{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-90deg);
}
}
@keyframes outright{
from{
transform: rotateY(-90deg);
}
to{
transform: rotateY(0deg);
}
}
@keyframes inleft{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(90deg);
}
}
@keyframes outleft{
from{
transform: rotateY(90deg);
}
to{
transform: rotateY(0deg);
}
}
@keyframes intop{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(-90deg);
}
}
@keyframes outtop{
from{
transform: rotateX(-90deg);
}
to{
transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
function bindEvent () {
var arr = ['in-top','in-bottom','out-top','out-bottom'];
item.onmouseenter = function (e) {
var classStr = get('in',getDer(this,e))
// 去掉 之前的class 加上现在的class
arr.forEach(function(ele){
item.className = "item " + classStr
})
}
item.onmouseleave = function (e) {
var classStr = get('out',getDer(this,e))
var arr = ['in-top','in-bottom','out-top','out-bottom'];
arr.forEach(function(ele){
item.className = "item " + classStr
})
}
}
bindEvent ();
function get (inOut,dir) {
var dirStr = ['top','right','bottom','left'];
console.log(inOut + '-' + dirStr[dir]);
return inOut + '-' + dirStr[dir]
}
function getDer (div,event) {
var d;
var w = div.offsetWidth;
var h = div.offsetHeight;
var l = div.offsetLeft;
var t = div.offsetTop;
// x,y 改成相对于 div中心为坐标系中心的值
var x = event.clientX - (l + w / 2) * (w > h ? (h / w ) : 1);
var y = event.clientY - (t + h / 2) * (h > w ? (w / h ) : 1);
// 求出 根据 x,y求出角度
// Math.atan2(y,x) 返回 -PI 到 PI 之间的值
// 转换成 角度
// Math.atan2(y,x) * (180/Math.PI) 返回 -180 ~ 180之间的值
// t : -135 ~ -45
// r : -45 ~ 0 0 ~ 45
// l : 135 ~ 180 -180 ~-135
// b : 45 ~ 135
// 如果是我的话, 基本就止于此了, 因为根据这个充分可以判断方向了.
// 但老师却对数据进行了处理
// 让返回值 的范围为0 ~360
// Math.atan2(y,x) * (180/Math.PI) + 180
// t : -135 ~ -45 --> 45 ~ 135
// r : -45 ~ 0 0 ~ 45 --> 135 ~ 225
// l : 135 ~ 180 -180 ~-135 --> 315 ~ 360 0 ~ 45
// b : 45 ~ 135 --> 225 ~ 315
// 全部÷ 90 这里稍微不太懂, 取范围右值,进行四舍五入,
// (Math.atan2(y,x) * (180/Math.PI) + 180) / 90
// 然后进行 + 3 %4
d = (Math.round((Math.atan2(y,x) * (180/Math.PI) + 180) / 90) + 3)%4
// t : -135 ~ -45 --> 45 ~ 135 --> 1 --> 4 --> 0
// r : -45 ~ 0 0 ~ 45 --> 135 ~ 225 --> 2 --> 5 --> 1
// b : 45 ~ 135 --> 225 ~ 315 -->3 --> 6 --> 2
// l : 135 ~ 180 -180 ~-135 --> 315 ~ 360 0 ~ 45 --> 0 4 --> 3 7 --> 3
return d
}
</script>
</body>
</html>
网友评论