以下是本次所作的效果圖
鼠標可以從上下左右四個方向進入，然後會根據鼠標進入的方向進行相應的旋轉，比如從上面進入，立方體就從上往下旋轉，從右進入立方體就從右向左旋轉
如何實現：
1、主要使用CSS3的3D旋轉進行書寫
2、對整體佈局進行劃分
3、利用少量JS實行鼠標的移入移出事件
HTML實現如下：
<div class="wrapper">
<ul>
<li>
<div class="box">
<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變換