當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

立体相册，你值得拥有

發(fā)布時間：2024/3/26 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了立体相册，你值得拥有小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

巧用animation制作一個立體相冊
首先，添加元素

<body><div class="rect-wrap"><div class="container"><div class="top slide"></div> <div class="bottom slide"></div><div class="left slide"></div><div class="right slide"></div><div class="front slide"></div><div class="back slide"></div></div></div></body> 復制代碼

再給每個面添加背景圖片，即個人相片，之后利用3D旋轉，使每個面旋轉相應的角度，最終組成一個正方體

.slide{width: 400px;height: 400px;position: absolute;}.left{background: url('images/left.jpg') no-repeat;background-size: 400px 400px;transform-origin: left center;transform: rotateY(90deg);}.right{background: url('images/right.jpg') no-repeat;background-size: 400px 400px;transform-origin: right center;transform: rotateY(-90deg);}.top{background: url('images/top.jpg') no-repeat;background-size: 400px 400px;}.bottom{background: url('images/bottom.jpg') no-repeat;background-size: 400px 400px;transform: translateZ(-400px);}.front{background: url('images/front.jpg') no-repeat;background-size: 400px 400px;transform-origin: bottom center;transform: rotateX(90deg);}.back{background: url('images/back.jpg') no-repeat;background-size: 400px 400px;transform-origin: top center;transform: rotateX(-90deg)} 復制代碼

添加動畫，使整個正方體空間呈3D旋轉

.container{ width: 400px;height: 400px;transform-style: preserve-3d;margin: 150px auto;animation: rotation 30s linear infinite;}@keyframes rotation{0%{transform: rotateX(0deg) rotateY(0);}10%{transform: rotateX(0deg) rotateY(180deg);}20%{transform: rotateX(-180deg) rotateY(180deg);}30%{transform: rotateX(-360deg) rotateY(180deg);}40%{transform: rotateX(-360deg) rotateY(360deg);}50%{transform: rotateX(-180deg) rotateY(360deg);}60%{transform: rotateX(90deg) rotateY(180deg);}70%{transform: rotateX(0deg) rotateY(180deg);}80%{transform: rotateX(90deg) rotateY(90deg);}90%{transform: rotateX(90deg) rotateY(0deg);}100%{transform: rotateX(0deg) rotateY(0deg);}} 復制代碼

最后，還可以加上一個hover效果，可以使動畫暫停，看相應的照片

.container:hover{animation-play-state: paused;} 復制代碼

轉載于:https://juejin.im/post/5d4818ec6fb9a06aeb10a2f8

總結

以上是生活随笔為你收集整理的立体相册，你值得拥有的全部內容，希望文章能夠幫你解決所遇到的問題。

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

相册