CSS3—3D翻轉

本案例主要是css3和html5，不會js也可以做動畫◕.◕

一、涉及到的的樣式

perspective

transform

transition

position

classList

codepen，runjs演示，代碼和講解在后面。

二、html結構

3個容器6個盒子，當鼠標經過時：

1.box1繞X軸（transform-origin默認容器中心），翻轉180°至背面box2，鼠標移開翻回

2.box3繞Y軸（transform-origin默認容器中心），翻轉180°至背面box4，鼠標移開翻回

3.box5，box6繞Z軸，（transform-origin分別為容器左右），翻轉180°，鼠標移開翻回

<div class="container" ontouchstart="this.classList.toggle('hover');">
    <div class="box box1">
        <span>front</span>
    </div>
    <div class="box box2">
        <span>back</span>
    </div>
</div>
<div class="container" ontouchstart="this.classList.toggle('hover');">
    <div class="box box3">
        <span>front</span>
    </div>
    <div class="box box4">
        <span>back</span>
    </div>
</div>
<div class="container" ontouchstart="this.classList.toggle('hover');">
    <div class="box box6">
        <span>back</span>
    </div>
    <div class="box box5">
        <span>front</span>
    </div>
</div>

 

三、CSS樣式

1.容器上加了perspective子元素box有透視效果

2.box2,box4是背面所以先翻轉-180°，這樣當翻到后面再翻回時符合正常視覺

3.每個box都加了backface-visibility：隱藏被旋轉的 div 元素的背面

4.box5，box6，改了旋轉中心點

<style>
.container{
    perspective: 400px;
    transform-style: preserve-3d;
}
.container, .box{
    width: 150px;
    height: 80px;
    margin: 10px auto;
}
.box{
    backface-visibility: hidden;
    transition: 1s;
    transform-style: preserve-3d;
    position: absolute;
    text-align: center;
}
.box1,.box3,.box5{background-color: pink;}
.box2,.box4,.box6{background-color: red;}
.box2{transform: rotateX(-180deg);}
.box4{transform: rotateY(-180deg);}
.box5{transform-origin:left;}
.box6{transform-origin:right;}
span{
    font-size: 20px;
    line-height: 80px;
}
.container:hover .box1{transform: rotateX(180deg);}
.container:hover .box2{transform: rotateX(0deg);}
.container:hover .box3{transform: rotateY(180deg);}
.container:hover .box4{transform: rotateY(0deg);}
.container:hover .box5{transform: rotateZ(180deg);}
.container:hover .box6{transform: rotateZ(-180deg);}
</style>

 

 是不是很簡單，接下來隨意翻騰吧~

 

博客園：CSS3—3D翻轉