zoukankan      html  css  js  c++  java
  • css实现3D切换功能

    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>

    关注公众号 了解更多编程知识

     

  • 相关阅读:
    java高级程序设计(第十周)
    java高级程序设计(第五周)
    java高级程序设计(第四周)
    期末设计(第十四周)
    期末设计(第十三周)
    期末设计(计划进度表)
    Java学习笔记(六)
    Java学习笔记(六)
    Java学习笔记(五)
    Java学习笔记(四)
  • 原文地址:https://www.cnblogs.com/hprBlog/p/10642370.html
Copyright © 2011-2022 走看看