使用CSS3實現乙個3D相簿

2022-01-17 16:24:55 字數 1578 閱讀 5736

css3系列我已經寫過兩篇文章，感興趣的同學可以先看一下***，***

第一篇主要列出了一些常用或經典的css3技巧和方法；第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。

本文再來利用css3屬性來編寫乙個例項，話不多說，先直接看看效果。***

因為前面已經講解過一些屬性的用法，此篇文章不再贅述，只記錄這個例項的編碼過程。專案**已上傳至github，專案**github位址

直接看html布局：
最外層的大容器根據實際情況定義樣式即可。

.my-container
perspective屬性用來啟用乙個3d空間，使其子元素都會獲得透視效果（使用了3d變換的元素，此例項中也就是相簿容器元素）。

.photo-wrap
相簿容器的transform-style: preserve-3d;樣式，表示所有子元素在3d空間中呈現。

.container
.img
現在瀏覽器看看效果：

右上圖可以看出，現在每張都固定在同乙個位置。很明顯不是我們想要的效果。但是想要達到我們預期的效果，要怎麼改變呢？

現在這些都在容器的最中心點以平面的形式展現的，要想形成乙個圓形，就要用到旋轉屬性（因為要繞著y軸旋轉，所以是rotatey）了。

這裡一共有9張圖，所以按360/9=40度為單位來分別對每張圖進行旋轉。

.img01 


.img02 


.img03 


.img04 


.img05 


.img06 


.img07 


.img08 


.img09
增加旋轉之後，再看看效果：

我們發現這些不在乙個平面了，但是都擠在了一起，我們試著把每張都向自己的前方(translatez)移動300畫素，看看會發生什麼。

.img01 


.img02 


.img03 


.img04 


.img05 


.img06 


.img07 


.img08 


.img09
增加旋轉和移動之後的效果：

至此，就已經達到我們預期的效果了。把每個標籤加上喜歡的**，就ok啦！

想要讓這個相簿動起來，加乙個動畫就好了。

@keyframes rotatey360 


to }
然後給"相簿容器"container元素新增動畫屬性：

animation: rotatey360 15s ease-in-out infinite;
最終，大功告成：

**已經上傳至github。專案**github位址，喜歡的童鞋們不妨點個star呀！謝謝～

如何使用CSS3實現乙個3D相簿

css3系列我已經寫過兩篇文章了，在這貼出鏈結，感興趣的同學可以看一下css3初體驗之奇技淫巧，css3 3d立方體效果 transform也不過如此 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利...

如何使用CSS3實現乙個3D商品標籤

使用3d緞帶形狀的標籤是常見的乙個設計模式，用在商品折扣 文章標題或 推薦資訊上，來突出顯示重點內容，吸引使用者視覺焦點。實現的方法有2種，一種是使用背景，一種是使用三角形的css3偽元素。本文介紹第2種方法，使用乙個最簡化的例項來講解如何實現這個效果 上面的介面是一張簡化的商品卡片，包含標籤和商品...

使用html css js實現3D相簿

使用html css js實現3d相簿，快來上傳的 吧 效果圖 如下，複製即可用 doctype html html lang en head meta charset utf 8 title title title style html,body box di z p style head bod...