html 立体相册
<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">body{/*視距,觀察者與圖像的距離*/perspective: 800px;}@keyframes myAnimation{from{/*運動開始各軸偏轉的位置*/transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{/*運動結束各軸偏轉的位置*/transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}/*動畫效果相關屬性*/.container{animation-name: myAnimation;/*時長*/animation-duration: 10s;/*速度曲線*/animation-timing-function: linear;/*循環(huán)次數*/animation-iteration-count: infinite;/*運動狀態(tài)*/animation-play-state: running;}.container{width: 200px;height: 200px;position: relative;margin: 250px auto;transform-style: preserve-3d;/*改為3d模式*//*transform:rotateX(45deg) rotateY(45deg);*/}.container > img{width: 200px;height: 200px;position: absolute;}.container>img:nth-child(2){/*將圖片向左移動200個像素*/left: -200px;/*定義圖片的旋轉軸,將圖像的最右邊做為旋轉軸*/transform-origin: right;/*將圖片延y軸旋轉90°*/transform: rotateY(90deg);}.container>img:nth-child(3){right:-200px;transform-origin: left;transform: rotateY(-90deg);}.container>img:nth-child(4){top: -200px;transform-origin: bottom;transform: rotateX(-90deg);}.container>img:nth-child(5){bottom: -200px;transform-origin: top;transform: rotateX(90deg);}.container>img:nth-child(6){transform: translateZ(200px);}.container:hover>img:nth-child(1){transform: translateZ(-100px);}.container:hover>img:nth-child(2){left: -300px;transform-origin: right;transform: rotateY(90deg);}.container:hover>img:nth-child(3){right:-300px;transform-origin: left;transform: rotateY(-90deg);}.container:hover>img:nth-child(4){top: -300px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover>img:nth-child(5){bottom: -300px;transform-origin: top;transform: rotateX(90deg);}.container:hover>img:nth-child(6){transform: translatez(300px);}</style>
</head>
<body><div class="container"><img src="C:\Users\....\Desktop\新建文件夾 (3)\1.png"><img src="C:\Users\....\Desktop\新建文件夾 (3)\2.png"><img src="C:\Users\....\Desktop\新建文件夾 (3)\3.png"><img src="C:\Users\....\Desktop\新建文件夾 (3)\4.png"><img src="C:\Users\....\Desktop\新建文件夾 (3)\5.png"><img src="C:\Users\....\Desktop\新建文件夾 (3)\6.png"></div>
</body>
</html>
效果：正方體圖片旋轉，當鼠標觸碰立體相冊時，各個面的圖片向外伸展。
總結
- 上一篇： 一阶电路中的时间常数_一阶电路的三要素法
- 下一篇： 其实特简单，1分钟爬取全国高校信息并制成