立体相册，你值得拥有
生活随笔
收集整理的這篇文章主要介紹了
立体相册，你值得拥有
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
巧用animation制作一個立體相冊
首先，添加元素
再給每個面添加背景圖片，即個人相片，之后利用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
總結
以上是生活随笔為你收集整理的立体相册，你值得拥有的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于五子棋AI的一点小尝试
- 下一篇： skia 之canvas