<!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视频教程】
Copyright © 2019- sarr.cn 版权所有 赣ICP备2024042794号-1
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务