CSS实现3D切换功能的代码示例

来源：欧宁财经

本篇文章给大家带来的内容是关于CSS实现3D切换功能的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html>
<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>
 <div id="app" data-hover="asdasdasd">
 asdasdasd
 </div>
</div>
</body>
</html>

【相关推荐：CSS视频教程】

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务