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

也许你要早上七点起床,晚上十二点睡觉,日复一日,踽踽独行。但只要笃定而动情地活着,即使生不逢时,你人生最坏的结果,也只是大器晚成。

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>guodu</title>
  5. <metacharset="utf-8">
  6. <styletype="text/css">
  7. #wp{
  8. border:1pxsolidred;
  9. width:500px;
  10. height:500px;
  11. background-color:pink;
  12. color:lime;
  13. transition-property:backgroundcolor;
  14. transition-duration:5s;
  15. transition-timing-function:cubic-bezier(000.20.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:(150px100px120px);
  24. transform:skewY(80deg)rotate(45deg)translate(50%);
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <divid="wp"><h1>南海是中国的,菲律宾也是中国的</h1></div>
  30. </body>
  31. </html>

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

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例