css动画效果制作正方体旋转相册
生活随笔
收集整理的這篇文章主要介紹了
css动画效果制作正方体旋转相册
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下代碼利用css動畫效果制作了一個旋轉的正方體，給正方體六個面放置好圖片就可以當一個炫酷有趣的正方體旋轉相框啦！可以將女朋友的照片放進去哦，趕快去試試，給女朋友一個驚喜吧！
下面沒有放入背景建議大家可以自己設置一下背景，讓畫面更浪漫。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fa {position: relative;height: 310px;width: 310px;margin: 200px auto;transform-style: preserve-3d;transform: rotate3d(1, 0, 0, 0deg);animation: zheng;animation-duration: 20s;animation-iteration-count: infinite;}div>img {height: 200px;width: 200px;}.fa>div {height: 300px;width: 300px;position: absolute;border: 2px solid #444;}.fa>div:nth-child(2) {transform-origin: left;transform: rotate3d(0, 1, 0, -90deg);}.fa>div:nth-child(3) {transform-origin: right;transform: rotate3d(0, 1, 0, 90deg);}.fa>div:nth-child(4) {transform-origin: top;transform: rotate3d(1, 0, 0, 90deg);}.fa>div:nth-child(5) {transform-origin: bottom;transform: rotate3d(1, 0, 0, -90deg);}.fa>div:nth-child(6) {transform: translate3d(0, 0, 300px);}div>img {height: 300px;width: 300px;}@keyframes zheng {from {transform: rotate3d(1, 0, 0, 360deg);;}25% {transform: rotate3d(0, 1, 0, 0deg);;}50% {transform: rotate3d(0, 1, 0, 360deg);;}to {transform: rotate3d(1, 0, 0, 0deg);;}}</style> </head><body><div class="fa"><!-- 在此處更換照片 --><div><img src="img/2.jpg" alt=""></div><div><img src="img/1.jpg" alt=""></div><div><img src="img/3.jpg" alt=""></div><div><img src="img/4.jpg" alt=""></div><div><img src="img/5.jpg" alt=""></div><div><img src="img/6.jpg" alt=""></div></div> </body></html>總結
以上是生活随笔為你收集整理的css动画效果制作正方体旋转相册的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jquery实现app开发闹钟功能_jQ
- 下一篇： 使用pycharm + kivy开发自己