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