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