CSS3实现的图片3D旋转万花筒形状布局特效源码.zip资源-CSDN文库

共10个文件

png：9个

html：1个

版权申诉

css3

105 浏览量 2022-11-02 23:36:30 上传评论收藏 132KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现的图片3D旋转万花筒形状布局特效源码.zip （10个子文件）

132692083007974723

img

5.png 21KB

9.png 11KB

1.png 9KB

6.png 18KB

2.png 9KB

7.png 10KB

4.png 30KB

8.png 6KB

3.png 18KB

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.png" > </div> <div style="transform: rotateY(40deg) translateZ(275px);"> <img src="img/2.png"> </div> <div style="transform: rotateY(80deg) translateZ(275px);"> <img src="img/3.png"> </div> <div style="transform: rotateY(120deg) translateZ(275px);"> <img src="img/4.png"> </div> <div style="transform: rotateY(160deg) translateZ(275px);"> <img src="img/5.png"> </div> <div style="transform: rotateY(200deg) translateZ(275px);"> <img src="img/6.png"> </div> <div style="transform: rotateY(240deg) translateZ(275px);"> <img src="img/7.png"> </div> <div style="transform: rotateY(280deg) translateZ(275px);"> <img src="img/8.png"> </div> <div style="transform: rotateY(320deg) translateZ(275px);"> <img src="img/9.png" > </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉