js自转旋转木马相册，情人节浪漫定制，程序员的专属表白源代码资源-CSDN文库

共1个文件

html：1个

版权申诉

html

web

11 浏览量 2023-02-18 23:16:11 上传评论收藏 814B ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

自传相册.zip （1个子文件）

自传相册

index.html 2KB

<!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>

评论收藏

内容反馈

版权申诉