3D翻轉

向上

html

<div class="div1">
    <img src="images/ad_stock.jpg" alt="">
    <div>
        山水
    </div>
</div>

css
.

div1{
   width:150px;
   height:150px;
   margin:2%;
   position:relative;
   transform-style:preserve-3d;
   transition:all 1s ;
}
.div1 img{
   left:0;
   top:0;
   position:absolute;
   transform:translateZ(50px);   // 高度的一半
   width:100%;
   height:100px;
}
.div1 div{
   width:100%;
   height:100px;
   background:#264C84;
   color:#fff;
   transform:rotateX(-90deg) translateZ(50px);
}
.div1:hover{
   transform:rotateX(90deg);
}

向下

html

<div class="div2">
    <img src="images/ad_stock.jpg" alt="">
    <div>
        山水
    </div>
</div>

css
.

div2{
   width:150px;
   height:150px;
   margin:2%;
   position:relative;
   transform-style:preserve-3d;
   transition:all 1s ;
}
.div2 img{
   left:0;
   top:0;
   position:absolute;
   transform:translateZ(50px);   // 高度的一半
   width:100%;
   height:100px;
}
.div2 div{
   width:100%;
   height:100px;
   background:#264C84;
   color:#fff;
   transform:rotateX(90deg) translateZ(50px);
}
.div2:hover{
   transform:rotateX(-90deg);
}

向右

html

<div class="div3">
    <img src="images/ad_home.jpg" alt="">
    <div>
        向右翻
    </div>
</div>

css

.div3{
    width:150px;
    height:150px;
    margin:2%;
    position:relative;
    transform-style:preserve-3d;
    transition:all 1s ;
}
.div3 img{
    left:0;
    top:0;
    position:absolute;
    transform:translateZ(75px);   // 寬度的一半
    width:100%;
    height:100px;
}
.div3 div{
    width:100%;
    height:100px;
    background:#264C84;
    color:#fff;
    transform:rotateY(-90deg) translateZ(75px);
}
.div3:hover{
    transform:rotateY(90deg);
}

向左

html

<div class="div4">
    <img src="images/ad_home.jpg" alt="">
    <div>
        向右翻
    </div>
</div>

css

.div4{
    width:150px;
    height:150px;
    margin:2%;
    position:relative;
    transform-style:preserve-3d;
    transition:all 1s ;
}
.div4 img{
    left:0;
    top:0;
    position:absolute;
    transform:translateZ(75px);   // 寬度的一半
    width:100%;
    height:100px;
}
.div4 div{
    width:100%;
    height:100px;
    background:#264C84;
    color:#fff;
    transform:rotateY(90deg) translateZ(75px);
}
.div4:hover{
    transform:rotateY(-90deg);
}

正反

html

<div class="div5">
    <img src="images/ad_stock.jpg" alt="">
    <div class="td">
        山水
    </div>
</div>

css

.div5{
    width:150px;
    height:150px;
    margin:2%;
    position:relative;
    transform-style:preserve-3d;
    transition:all 1s ;
}
.div5 img{
    left:0;
    top:0;
    position:absolute;
    width:100%;
    height:100px;
}
.div5 div{
    width:100%;
    height:100px;
    background:rgba(0,0,0,0.4);
    color:white;
    transform:rotateY(-180deg) translateZ(1px);
}
.div5:hover{
    transform:rotateY(180deg);
}