css实现3D切换功能
程序员文章站
2022-06-23 23:28:18
Demo asdasdasd Demo
asdasdasd
<!doctype html>
<html lang="en">
<head>
<title>demo</title>
<style>
#app{
width: 100px;
height: 35px;
background-color: #006600;
text-align: center;
line-height: 35px;
position: relative;
transform-style: preserve-3d;
transition: all 0.3s linear;
}
#app:hover{
transform: rotatex(90deg);
transition: all 0.3s linear;
-webkit-transform-origin: 50% 0;
}
#app:before{
position: absolute;
top: 100%;
left: 0;
content: attr(data-hover);
width: 100px;
height: 35px;
transform: rotatex(-90deg);
transition: all 0.3s linear;
transform-origin: 50% 0;
text-align: center;
line-height: 35px;
background-color: red;
}
</style>
<div class="box">
<div id="app" data-hover="asdasdasd">
asdasdasd
</div>
</div>
</body>
</html>
上一篇： 第 6 章 C控制语句：循环