利用CSS3实现图片3D旋转
如下是本次所做的效果图jquery
鼠标能够从上下左右四个方向进入，而后会根据鼠标进入的方向进行相应的旋转，好比从上面进入，立方体就从上往下旋转，从右进入立方体就从右向左旋转app
如何实现：
一、主要使用CSS3的3D旋转进行书写dom
二、对总体布局进行划分ide
三、利用少许JS实行鼠标的移入移出事件 布局
HTML实现以下：flex
<div class="wrapper">this
<ul>3d
<li>orm
<div class="box">blog
<div class="show">
<img src="./img/1.png" alt="">
</div>
<div class="hide">hide</div>
</div>
</li>
<li>
<div class="box">
<div class="show">
<img src="./img/2.png" alt="">
</div>
<div class="hide">hide</div>
</div>
</li>
<li>
<div class="box">
<div class="show">
<img src="./img/3.png" alt="">
</div>
<div class="hide">hide</div>
</div>
</li>
</ul>
</div>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/index.js"></script>
在这里使用了ul li里面添加一个小方块，小方块里面有两个面（因为除了证实后都是hide面），每次旋转时只须要改变hide块的位置便可
CSS样式实现：
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrapper{
width: 800px;
margin: 100px auto;
border: 1px solid #000;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper ul{
width: 100%;
/* height: 200px; */
display: flex;
justify-content: center;
align-items: center;
}
.wrapper ul li{
width: 200px;
height: 200px;
margin: 20px;
perspective: 1000px;
}
.wrapper ul li .box{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: o.3s ease-out forwards;
}
.wrapper ul li .box .show{
position: absolute;
width: 100%;
height: 100%;
}
.wrapper ul li .box .show img{
width: 100%;
height: 100%;
}
.wrapper ul li .box .hide{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.wrapper ul li .box .show{
transform: translateZ(100px);
}
.wrapper ul li .box .hide{
transform: translateZ(-100px);
}
.wrapper ul li .box.in-top .hide,
.wrapper ul li .box.out-top .hide{
transform: rotate3d(1,0,0,90deg) translateZ(100px);
}
.wrapper ul li .box.in-bottom .hide,
.wrapper ul li .box.out-bottom .hide{
transform: rotate3d(1,0,0,-90deg) translateZ(100px);
}
.wrapper ul li .box.in-left .hide,
.wrapper ul li .box.out-left .hide{
transform: rotate3d(0,1,0,-90deg) translateZ(100px);
}
.wrapper ul li .box.in-right .hide,
.wrapper ul li .box.out-right .hide{
transform: rotate3d(0,1,0,90deg) translateZ(100px);
}
.wrapper ul li .box.in-top{
animation-name: in-top;
}
.wrapper .box.out-top{
animation-name: out-top;
}
.wrapper ul li .box.in-bottom{
animation-name: in-bottom;
}
.wrapper .box.out-bottom{
animation-name: out-bottom;
}
.wrapper ul li .box.in-left{
animation-name: in-left;
}
.wrapper .box.out-left{
animation-name: out-left;
}
.wrapper ul li .box.in-right{
animation-name: in-right;
}
.wrapper .box.out-right{
animation-name: out-right;
}
@keyframes in-top{
0%{
transform: rotate(0deg);
}
100%{
transform: rotateX(-90deg);
}
}
@keyframes out-top{
0%{
transform: rotateX(-90deg);
}
100%{
transform: rotateX(0deg);
}
}
@keyframes in-bottom{
0%{
transform: rotate(0deg);
}
100%{
transform: rotateX(90deg);
}
}
@keyframes out-bottom{
0%{
transform: rotateX(90deg);
}
100%{
transform: rotateX(0deg);
}
}
@keyframes in-left{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(90deg);
}
}
@keyframes out-left{
0%{
transform: rotateY(90deg);
}
100%{
transform: rotateY(0deg);
}
}
@keyframes in-right{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(-90deg);
}
}
@keyframes out-right{
0%{
transform: rotateY(-90deg);
}
100%{
transform: rotateY(0deg);
}
}
经过划分进入与出来的两种状况，分为两个类名实现，在进入以前须要将hide方块移动要旋转以前的位置，而后经过添加类名来实现旋转，其中利用animate的名字来控制box的旋转，而经过JS来控制类名的添加
这里强调如下 rotate旋转 对于X轴向里旋转是正角，向外旋转是负角，而对于Y轴向右旋转是正角，向左旋转是负角，其中旋转过程Z轴也会跟着改变，因此transform过程当中书写顺序是很重要的。
这里的实现就是经过in-top和out-top来实现，同理bottom。left和right等同样的实现
JS代码：
function bindEvent() {
$('.box').on('mouseenter', function(e) {
addClassTo(this, e, 'in');
}).on('mouseleave', function(e) {
addClassTo(this, e, 'out');
})
}
bindEvent();
function getDirect(dom, e){
var x = e.offsetX - dom.offsetWidth / 2;
var y = e.offsetY - dom.offsetHeight / 2;
var d = (Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return d;
}
function addClassTo(dom, e, state){
var d = getDirect(dom, e);
var direction = '';
switch(d){
case 0: {
direction = '-top';
break;
}
case 1:{
direction = '-right';
break;
}
case 2: {
direction = '-bottom';
break;
}
case 3: {
direction = '-left';
break;
}
default: break;
}
$(dom).attr('class', 'box ' + state + direction);
// return direction;
}
JS功能就是用来判断是进入仍是出去，以及进入出去时所加的类名
var d = (Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;其中这句是用来判断进入的方向（上下左右），就是将中心点移入到小方块的中心，而后对其角度计算取（0-4）其中这样计算后对4求余右边进入的方向为0，顺时针增大，而经过加3再对4求余，使得最上面进入为0，其他顺时针增大到3，所以判断出进入的方向性。
好啦，本次小demo就到此了，请好好理解一下。深刻掌握CSS的3D变换