Maison >interface Web >tutoriel CSS >Exemple de code CSS implémentant la fonction de commutation 3D
Ce que cet article vous apporte est un exemple de code pour implémenter la fonction de commutation 3D en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
<!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>
[Recommandations associées : Tutoriel vidéo CSS]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!