css過渡+3D效果的簡單實(shí)現(xiàn)
發(fā)布時(shí)間：2016-07-14 11:54:13 作者：佚名 
我要評(píng)論
我要評(píng)論下面小編就為大家?guī)硪黄猚ss過渡+3D效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
css過渡+3D效果的簡單實(shí)現(xiàn)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!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效果的簡單實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/yzybc/p/5666719.html
相關(guān)文章
- 本文主要介紹了菜單欄 “三” 變形為“X”css3過渡動(dòng)畫的實(shí)現(xiàn)方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-28
- 本篇文章主要介紹了Css3新特性應(yīng)用之過渡與動(dòng)畫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-10
- 大家都知道過渡動(dòng)畫是動(dòng)畫的基礎(chǔ)，在學(xué)習(xí)動(dòng)畫屬性之前，我們需要先了解過渡屬性transition，下面這篇文章通過示例代碼給大家詳細(xì)介紹了CSS3中的元素過渡屬性transition，有2016-11-30
- 下面小編就為大家?guī)硪黄獪\談CSS過渡、動(dòng)畫和變換。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-07-21
- 這篇文章主要為大家詳細(xì)介紹了CSS3過渡transition效果實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-03
用Dreamweaver制作網(wǎng)頁中常用的過渡效果
網(wǎng)頁過渡是指當(dāng)瀏覽者進(jìn)入或離開網(wǎng)頁時(shí)，頁面呈現(xiàn)的不同的刷新效果，比如卷動(dòng)、百葉窗等。2010-06-20css3過渡_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了css3過渡的相關(guān)資料，用CSS3做一些過渡效果和動(dòng)畫，特別適合Web前端開發(fā)員學(xué)習(xí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-11