當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

纯CSS实现3D照片墙

發(fā)布時間：2023/12/2 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了纯CSS实现3D照片墙小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML部分：

CSS部分：

@keyframes rotate-frame {0% {transform: rotateX(-20deg) rotateY(0deg);}10% {transform: rotateX(-20deg) rotateY(36deg);}20% {transform: rotateX(-20deg) rotateY(72deg);}30% {transform: rotateX(-20deg) rotateY(108deg);}40% {transform: rotateX(-20deg) rotateY(144deg);}50% {transform: rotateX(-20deg) rotateY(180deg);}60% {transform: rotateX(-20deg) rotateY(216deg);}70% {transform: rotateX(-20deg) rotateY(252deg);}80% {transform: rotateX(-20deg) rotateY(288deg);}90% {transform: rotateX(-20deg) rotateY(324deg);}100% {transform: rotateX(-20deg) rotateY(360deg);}}body {background: #f9f9f9;}img{width:100%;height: 100%;}.photo-wrap {perspective: 800px;width: 800px;}.container {width: 800px;height: 500px;margin: 0 auto;position: relative;transform-style: preserve-3d;transform:rotateX(-10deg);animation: rotate-frame 10s linear infinite;}.img {width: 200px;height: 118px;line-height: 118px;text-align: center;position: absolute;top: 160px;left: 300px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
　　　　　　/*倒影的實現(xiàn) 第二個屬性值為offset屬性值定義圖片和倒影影像之間的間距，第三個為給倒影增加消影效果*/-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));background: pink;background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5)));background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));transform: rotateY(0deg);}.img01 {transform: rotateY(0deg) translateZ(300px);}.img02 {transform: rotateY(40deg) translateZ(300px);}.img03 {transform: rotateY(80deg) translateZ(300px);}.img04 {transform: rotateY(120deg) translateZ(300px);}.img05 {transform: rotateY(160deg) translateZ(300px);}.img06 {transform: rotateY(200deg) translateZ(300px);}.img07 {transform: rotateY(240deg) translateZ(300px);}.img08 {transform: rotateY(280deg) translateZ(300px);}.img09 {transform: rotateY(320deg) translateZ(300px);}

效果如下（倒影的實現(xiàn)方法已在CSS部分用藍(lán)色標(biāo)記出來）：

更多專業(yè)前端知識，請上【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的纯CSS实现3D照片墙的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

css
照片