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

互联网 19-4-3

本篇文章给大家带来的内容是关于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视频教程】

以上就是CSS实现3D切换功能的代码示例的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css