HTML正方体滚动特效
生活随笔
收集整理的這篇文章主要介紹了
HTML正方体滚动特效
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 注意
- 源代碼
- 效果圖
- 錄屏效果
注意
一.由于代碼中的插入照片都是200*200的，所以為了方便，大家可以直接修改照片的像素。
二.插入的照片一定要注意路徑，不然就會沒有照片效果。如下圖：
- 插入照片時，最好創(chuàng)建一個新的文件夾，將照片歸類，方便我們插入。
源代碼
<!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>/* 設(shè)置立體效果必備的樣式 */html {perspective: 800px;}.cube {/* 與圖片像素一致,一定要更改圖片的像素大小 */width: 200px;height: 200px;margin: 100px auto;/* 設(shè)置3D變形效果 */transform-style: preserve-3d;transform: rotateX(125deg) rotateZ(25deg);animation: rotate 10s linear infinite;/* linear：勻速運(yùn)動 */}.cube>div {width: 200px;height: 200px;opacity: 0.9;position: absolute;}@keyframes rotate {from {transform: rotateX(0) rotateZ(0);}to {/* 1turn=360° */transform: rotateX(1turn) rotateZ(1turn);}}img {width: 200px;height: 200px;}.box1 {transform: rotateY(90deg) translateZ(100px);}.box2 {transform: rotateY(-90deg) translateZ(100px);}.box3 {transform: rotateX(90deg) translateZ(100px);}.box4 {transform: rotateX(-90deg) translateZ(100px);}.box5 {transform: rotateX(0) translateZ(100px);}.box6 {transform: rotateY(180deg) translateZ(100px);}</style> </head><body><!-- 創(chuàng)建一個外部容器 --><div class="cube"><div class="box1"><img src="./img/109951166437086803.jpg" alt=""></div><div class="box2"><img src="./img/109951166528288399.jpg" alt=""></div><div class="box3"><img src="./img/109951166645029541.jpg" alt=""></div><div class="box4"><img src="./img/109951166688543010.jpg" alt=""></div><div class="box5"><img src="./img/109951166732535770.jpg" alt=""></div><div class="box6"><img src="./img/109951167067363062.jpg" alt=""></div></div> </body><ml>三.大家只需要修改這里面的照片地址
效果圖
錄屏效果
QQ錄屏20220714130524
（最后，感謝滕總和余老板的幫助）
總結(jié)
以上是生活随笔為你收集整理的HTML正方体滚动特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AntD的Table表头title加Ic
- 下一篇： 字节跳动Android内部学习资料泄露，