關於css過渡和3D效果的簡單實現

來源:互聯網
上載者:User
下面為大家帶來一篇css過渡+3D效果的簡單實現。內容挺不錯的,現在就分享給大家,也給大家做個參考。

css過渡+3D效果的簡單實現

<!DOCTYPE html><html><head><title>guodu</title><meta charset="utf-8"><style type="text/css">#wp{   border: 1px solid red;   width: 500px;   height: 500px;   background-color: pink;   color: lime;   transition-property: background color;   transition-duration: 5s;   transition-timing-function: cubic-bezier(0 0 0.2 0.2);   transition-delay: 1s;   transform: perspective(600px);   }   #wp:hover{   background: red;   color: white;   width: 800px;   transform-origin: (150px 100px 120px);   transform: skewY(80deg) rotate(45deg) translate(50%) ;   }   </style></head><body><p id="wp"><h1>南海是中國的,菲律賓也是中國的</h1></p></body></html>

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.