本篇文章给大家带来的内容是关于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切换功能的代码示例的详细内容,更多请关注php中文网其它相关文章!
已抢62053个
抢已抢110718个
抢已抢46650个
抢已抢133408个
抢已抢32200个
抢