利用CSS3实现图片3D旋转

以下是本次所作的效果图

鼠标可以从上下左右四个方向进入，然后会根据鼠标进入的方向进行相应的旋转，比如从上面进入，立方体就从上往下旋转，从右进入立方体就从右向左旋转

如何实现：

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里面添加一个小方块，小方块里面有两个面