css3 3D 深度翻轉效果案例

狼性生物發表於2019-06-24
CSSS33D

效果圖如下

程式碼如下：（複製儲存為.html可直接看效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS3—3D翻轉</title>  
</head>  
<style>
.container{
    perspective: 400px;
    transform-style: preserve-3d;
    width: 150px;
    height: 80px;
    margin: 10px auto;
}
.box{
    width: 150px;
    height: 80px;
    margin: 10px auto;
    backface-visibility: hidden;
    transition: 2s;
    transform-style: preserve-3d;
    position: absolute;
    text-align: center;
}
.box1{background-color: rgba(255,0,0,0.5);transform: rotateX(0deg) scale(1,1);}
.box2{background-color: rgba(0,255,0,0.5);transform: rotateX(-180deg) scale(0.5,0.5);}
    
.container:hover .box1{transform: rotateX(180deg) scale(0.5,0.5);}
.container:hover .box2{transform: rotateX(0deg) scale(1,1);}
</style>
    </head>
    <body>
<div class="container">
    <div class="box box1">
        <span>front</span>
    </div>
    <div class="box box2">
        <span>back</span>
    </div>
</div>
    </body>
</html>

 

參考博文：https://blog.csdn.net/a772116804/article/details/79551753

相關文章