Demo asdasdasd <!DOCTYPE html> <html lang="en"> <head> <title>Demo</title> <style> #app{ width: 100px; height: 35px; background-color: #006600; text-a ...
Demo
asdasdasd<!DOCTYPE html> <html lang="en"> <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 class="box"> <div id="app" data-hover="asdasdasd"> asdasdasd </div> </div> </body> </html>
