由於疫情原因，賦閑在家，閑來無事，搜集一些有趣的小技巧來分享一下，說不定以后還能用到，哈哈
效果圖（是可以轉動的）：
制作工具：有電腦，有瀏覽器即可。針對零基礎
制作步驟：
1、在桌面建一個文件夾"轉動相冊-->img"兩個文件夾，在img文件夾放上你們女朋友的照片，照片命名方式:數字.jpg
2、在轉動相冊文件夾下新建一個txt文件，名字隨意，鍵入以下代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } img{ width:200px; height: 300px; } body{ background-color: #313131; } @keyframes fn{ 0% {transform:rotateX(-15deg) rotateY(0deg);} 100%{transform:rotateX(-15deg) rotateY(360deg);} } @-moz-keyframes fn{ 0% {transform:rotateX(-15deg) rotateY(0deg);} 100%{transform:rotateX(-15deg) rotateY(360deg);} } @-ms-keyframes fn{ 0% {transform:rotateX(-15deg) rotateY(0deg);} 100%{transform:rotateX(-15deg) rotateY(360deg);} } @-webkit-keyframes fn{ 0% {transform:rotateX(-15deg) rotateY(0deg);} 100%{transform:rotateX(-15deg) rotateY(360deg);} } .box{ width:200px; height:300px; position:relative; margin:auto; margin-top:150px; transform-style:preserve-3d; transform:rotateX(-10deg); animation: fn 10s; animation-iteration-count: infinite; animation-timing-function: linear; position: relative } .box:hover{ animation-play-state: paused; } .box>div{ width:200px; height:300px; position: absolute; left:0; top:0; }
</style> <!- 以上默認不用修改，下面加入你的圖片路徑-> </head> <body> <div class="box"> <div style="transform: rotateY(0deg) translateZ(275px);"> <img src="img/1.jpg" > </div> <div style="transform: rotateY(40deg) translateZ(275px);"> <img src="img/2.jpg"> </div> <div style="transform: rotateY(80deg) translateZ(275px);"> <img src="img/3.jpg"> </div> <div style="transform: rotateY(120deg) translateZ(275px);"> <img src="img/4.jpg"> </div> <div style="transform: rotateY(160deg) translateZ(275px);"> <img src="img/5.jpg"> </div> <div style="transform: rotateY(200deg) translateZ(275px);"> <img src="img/6.jpg"> </div> <div style="transform: rotateY(240deg) translateZ(275px);"> <img src="img/7.jpg"> </div> <div style="transform: rotateY(280deg) translateZ(275px);"> <img src="img/8.jpg"> </div> <div style="transform: rotateY(320deg) translateZ(275px);"> <img src="img/9.jpg" > </div> </div> </body> </html>
3、修改txt文件后綴名為.html
一般電腦的默認設置是不顯示文件后綴的，可以通過以下方法修改設置：
修改完以后：
然后雙擊HTML文件就會在瀏覽器打開，快去用此方法討好一下你們的女朋友吧
懶人方法：
下載壓縮文件：
鏈接: https://pan.baidu.com/s/1IX5UkOgjBoEgXa8VCZdcjQ 提取碼: cfrm
解壓到桌面，將HTML文件以txt方式打開 ，替換成你女票的照片和照片路徑名字即可
這是另外一種類型：
鏈接: https://pan.baidu.com/s/1fkLylh20tmruDR8A4nLp-A 提取碼: 86y9