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

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

1. !DOCTYPE html>   
2. html>   
3. head>   
4. tITle> guodu/title>   
5. meta charset="utf-8">   
6. style type="text/css">   
7. #wp{   
8. border: 1px solid red;   
9. width: 500px;   
10. height: 500px;   
11. background-color: pink;   
12. color: lime;   
13. transition-PRoperty: background color;   
14. transition-duration: 5s;   
15. transition-timing-function: cubic-bezier(0 0 0.2 0.2);   
16. transition-delay: 1s;   
17. transform: perspective(600px);   
18. }   
19. #wp:hover{   
20. background: red;   
21. color: white;   
22. width: 800px;   
23. transform-origin: (150px 100px 120px);   
24. transform: skewY(80deg) rotate(45deg) translate(50%) ;   
25. }   
26. /style>   
27. /head>   
28. body>   
29. div id="wp"> h1> 南海是中国的，菲律宾也是中国的/h1> /div>   
30. /body>   
31. /html>   
32.   

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！