css过渡+3D效果的简单实现

css过渡+3D效果的简单实现

XML/HTML Code复制内容到剪贴板 <!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>   <div id="wp"><h1>南海是中国的,菲律宾也是中国的</h1></div>   </body>   </html>     

以上这篇css过渡+3D效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

原文地址:http://www.cnblogs.com/yzybc/p/5666719.html

css过渡+3D效果的简单实现