css过渡+3D效果的简单实现
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <title>guodu</title> <metacharset="utf-8"> <styletype="text/css"> #wp{ border:1pxsolidred; width:500px; height:500px; background-color:pink; color:lime; transition-property:backgroundcolor; transition-duration:5s; transition-timing-function:cubic-bezier(000.20.2); transition-delay:1s; transform:perspective(600px); } #wp:hover{ background:red; color:white; width:800px; transform-origin:(150px100px120px); transform:skewY(80deg)rotate(45deg)translate(50%); } </style> </head> <body> <divid="wp"><h1>南海是中国的,菲律宾也是中国的</h1></div> </body> </html>
以上这篇css过渡+3D效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。
原文地址:http://www.cnblogs.com/yzybc/p/5666719.html