Home > Article > Web Front-end > Code example of CSS implementing 3D switching function

Code example of CSS implementing 3D switching function

不言forward: 2019-04-03 10:51:322450browse

The content of this article is about the code examples for implementing 3D switching function in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!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>

【Related recommendations: CSS video tutorial】

The above is the detailed content of Code example of CSS implementing 3D switching function. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Analysis of the box-sizing attribute in CSS3 (with code)Next article：Analysis of the box-sizing attribute in CSS3 (with code)

See more

Code example of CSS implementing 3D switching function

Related articles