一款利用html5和css3實現(xiàn)的3D滾動特效的教程
發(fā)布時間:2015-01-04 09:49:28 作者:佚名
我要評論

怎么利用css3和html5制作圓形很正方形的3D滾動特效,今天給大家?guī)硪豢頷tml5和css3實現(xiàn)的3D滾動特效。代碼很全,不會的朋友可以可以進來學習一下,需要的朋友可以參考下
今天給大家?guī)硪豢頷tml5和css3實現(xiàn)的3D滾動特效。效果圖如下:
實現(xiàn)的代碼。
html代碼:
XML/HTML Code復制內(nèi)容到剪貼板
- <div class="container">
- <div class="cube">
- <div class="side side1">
- </div>
- <div class="side side2">
- </div>
- <div class="side side3">
- </div>
- <div class="side side4">
- </div>
- <div class="side side5">
- </div>
- <div class="side side6">
- </div>
- </div>
- </div>
- <div class="container container2">
- <div class="cube">
- <div class="side side1">
- </div>
- <div class="side side2">
- </div>
- <div class="side side3">
- </div>
- <div class="side side4">
- </div>
- <div class="side side5">
- </div>
- <div class="side side6">
- </div>
- </div>
- </div>
css3代碼:
CSS Code復制內(nèi)容到剪貼板
- body{
- height:100vh;
- }
- .container{
- position:absolute;
- height:100px;
- width:100px;
- left:33%;
- top:50%;
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- -webkit-perspective:400px;
- perspective:400px;
- }
- .cube{
- height:100px;
- widht:100px;
- -webkit-transform-origin:50% 50%;
- transform-origin:50% 50%;
- -webkit-transform-style:preserve-3d;
- transform-style:preserve-3d;
- -webkit-animation:rotate 4s infinite ease-in-out;
- animation:rotate 4s infinite ease-in-out;
- }
- .side{
- position:absolute;
- display:block;
- height:100px;
- width:100px;
- }
- .side1{
- background:#41C3AC;
- -webkit-transform:translateZ(100px);
- transform:translateZ(100px);
- }
- .side2{
- background:#FF884D;
- -webkit-transform:rotateY(90deg) translateZ(100px);
- transform:rotateY(90deg) translateZ(100px);
- }
- .side3{
- background:#32526E;
- -webkit-transform:rotateY(180deg) translateZ(100px);
- transform:rotateY(180deg) translateZ(100px);
- }
- .side4{
- background:#65A2C5;
- -webkit-transform:rotateY(-90deg) translateZ(100px);
- transform:rotateY(-90deg) translateZ(100px);
- }
- .side5{
- background:#FFCC5C;
- -webkit-transform:rotateX(90deg) translateZ(100px);
- transform:rotateX(90deg) translateZ(100px);
- }
- .side6{
- background:#FF6B57;
- -webkit-transform:rotateX(-90deg) translateZ(100px);
- transform:rotateX(-90deg) translateZ(100px);
- }
- @-webkit-keyframes rotate{
- 0%{
- -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
- }
- 33.33%{
- -webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg);
- }
- 66.66%{
- -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(0deg);
- }
- 100%{
- -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
- }
- }
- @keyframes rotate{
- 0%{
- transform:rotateX(0deg) rotateY(0deg);
- }
- 50%{
- transform:rotateX(360deg) rotateY(0deg);
- }
- 100%{
- transform:rotateX(360deg) rotateY(360deg);
- }
- }
- a{
- font-family:helvetica;
- color:#428bca;
- text-align:center;
- display:block;
- }
- .container2{
- left:66%;
- }
- .container2 .side{
- border-radius:50%;
- }
相關(guān)文章
CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局,本文介紹CSS3 最強二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效(最新推薦)
文章介紹了如何使用CSS3實現(xiàn)一個雷達探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,2025-02-21- CSS3的Flexbox是一種強大的布局模式,通過設置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應布局等問題,接下來通過本2025-02-19
css3 實現(xiàn)icon刷新轉(zhuǎn)動效果
本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果,文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性,結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一2025-02-19- CSS3過渡屬性用于實現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans2025-02-19
CSS3實現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼
本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式2025-02-19- 這篇文章主要介紹了如何使用CSS3的transition屬性實現(xiàn)平滑的過渡動畫,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-02-13
CSS3中使用flex和grid實現(xiàn)等高元素布局的示例代碼
本文介紹了使用CSS3中的Flexbox和Grid布局實現(xiàn)等高元素布局的方法,通過簡單的兩列實現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實現(xiàn)細節(jié)和效果,感興趣的朋2025-02-11- CSS3和SVG的結(jié)合使用為網(wǎng)頁設計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體2024-10-24