网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

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

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

XML/HTML Code复制内容到剪贴板
  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

上一篇：背景偏移取图标的实现方法
下一篇：css动画+照片清晰度动画的实现方法
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。