純CSS3製作按鈕3D翻轉效果
阿新 • • 發佈：2020-12-31
技術標籤：html/css/jscss3html
3D按鈕翻轉
具體效果
那麼我們開始製作3D按鈕翻轉效果
我們先把html的結構寫一下
<body>
<ul>
<li>
<div class="zheng">首頁</div>
</li>
<li>
<div class="zheng">登入</div>
</li>
< 正面顯現出來的按鈕我們有了，那麼在我們滑鼠移動到上面的時候出現的下面的按鈕，使用after偽元素製作。
先把基本的東西寫好，
*{ padding: 0; margin: 0; list-style: none; } :root,body{ width: 100%; height: 100%; } body{ background-color: #C6B2FF; }
用：root讓根標籤和body鋪滿整個螢幕
然後我們給ul設定一下屬性。。如下
使用calc（）讓元素正好處於螢幕中間，
使用perspective給我們的父元素設定一個視距（給3D轉換留出空間）
perspective-origin設定視角，center center是預設的！
ul{ width: 400px; height: 60px; position: relative; top:calc(50% - 30px); left: calc(50% - 200px); color: black; perspective: 5000px; perspective-origin: center center; }
設定完ul後我們給後面的li 和 div設定一下屬性
transform-style: preserve-3d;
這個屬性是制定子元素在三維空間顯示的。preserve-3d指定的子元素3d形式顯示；
**transform: translateZ(30px);**向z軸移30px；
ul li{
transform-style: preserve-3d;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
float: left;
font-weight: blod;
font-size: 1em;
/* background-color: white; */
transform: translateZ(30px);
transition:all 1s;
}
ul li div{
width: 100px;
height: 59px;
transform: translateZ(30px);
background-color: white;
}
做完前面的部分，我們來做用於翻轉的下面
transform:rotateX(-90deg)translateZ(-30px) 讓新建的元素在下面
：：after在元素之後新增
li::after{
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
font-weight: blod;
font-size: 1em;
display: block;
background-color: #C6B2FF ;
color: white; transform:rotateX(-90deg)translateZ(-30px) ;
}
li:nth-child(1)::after{
content: "首頁";
}
li:nth-child(2)::after{
content: "登入";
}
li:nth-child(3)::after{
content: "註冊";
}
li:nth-child(4)::after{
content: "關於";
}
li:hover{
/* transition:all 1s; */
transform: rotateX(90deg);
}
最後給li新增一個hover偽類就好了。