The following effects are taken in this FIG.
Mouse can enter from four directions, and will be in accordance with corresponding rotation direction of the mouse enters, such as entering from above, the cube is rotated from the top down, from right to left to right into the rotating cube
How to achieve:
1, the 3D rotation is mainly used to write CSS3
2, the overall layout is divided
3, using a small amount JS implement the mouse moved out of the event
HTML to achieve the following:
<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 used here which added a small box, the small box which has two faces (in addition to the proof are due hide surface), a time necessary to change the rotational position of the block to hide
CSS styles to achieve:
*{
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);
}
}
By dividing the entry and out of the two cases are divided into two classes were realized, before entering the need to hide the box before moving to the rotational position, and then rotated to achieve by adding the class name, the name of which use animate to the control box rotation, while controlling the addition to the class name by JS
Here the emphasis rotation rotate in the X axis is a positive angle, outward rotation angle is negative, while the right Y axis is a positive rotation angle, the rotation to the left is a negative angle, wherein rotation of the Z-axis will also change, so transform the process of writing order is very important.
Achieve here is achieved by in-top and out-top, empathy bottom. To achieve the same left and right, etc.
JS code:
Function Event Volume () {
$('.box').on('mouseenter', function(e) {
addClassTo(this, e, 'in');
}).on('mouseleave', function(e) {
addClassTo(this, e, 'out');
})
}
Event Volume ();
function getDirect(dom, e){
var x = e.offsetX - dom.offsetWidth / 2;
where 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);
was 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 function is used to enter or go out is judged, and when added into the name of the class out
var d = (Math.round (((Math.atan2 (y, x) * (180 / Math.PI)) + 180) / 90) + 3)% 4; the direction in which the phrase is used to determine that the incoming ( vertically and horizontally), the center point is moved to the center of the small box, and its angle is calculated taking (0-4) where after it is calculated on the right direction into the remainder of 4 is 0, clockwise increases, but by adding 3 4 and then the remainder, that is into the uppermost 0, increases clockwise to the remaining 3, it is determined that the incoming direction.
Well, this little demo on this, please understand it well. A deep understanding of CSS 3D transformations
