css过渡+3D效果的简单实现
(编辑：jimmy 日期: 2024/10/31 浏览：2)
css过渡+3D效果的简单实现
- <!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
上一篇：背景偏移取图标的实现方法