<!DOCTYPE html>
<html long="zh">
<head>
<meta charset="UTF-8">
<title>圆梯</title>
<style type="text/css">
body{
perspective:1000px;
background:ghostwhite;
}
.wrap{
width:30px;
height:30px;
/*border:1px solid gold;*/
transform-style:preserve-3d;
margin:100px auto;
position:relative;
transition:30s;
}
.wrap:hover{
transform:rotateY(2000deg);
}
.wrap div{
width:30px;
height:30px;
text-align:center;
line-height:30px;
color:white;
position:absolute;
top:0;
left:0;
transition:5s;
}
/*.wrap:hover*/ .call1{
background:skyblue;
transform:rotateY(0deg) translateY(0px) translateZ(100px);
}
/* .wrap:hover*/ .call2{
background:skyblue;
transform:rotateY(30deg) translateY(10px) translateZ(100px);
}
/*.wrap:hover*/ .call3{
background:skyblue;
transform:rotateY(60deg) translateY(20px) translateZ(100px);
}
/*.wrap:hover*/ .call4{
background:skyblue;
transform:rotateY(90deg) translateY(30px) translateZ(100px);
}
/*.wrap:hover*/ .call5{
background:skyblue;
transform:rotateY(120deg) translateY(40px) translateZ(100px);
}
/*.wrap:hover*/ .call6{
background:skyblue;
transform:rotateY(150deg) translateY(50px) translateZ(100px);
}
/*.wrap:hover*/ .call7{
background:skyblue;
transform:rotateY(180deg) translateY(60px) translateZ(100px);
}
/*.wrap:hover*/ .call8{
background:skyblue;
transform:rotateY(210deg) translateY(70px) translateZ(100px);
}
/*.wrap:hover*/ .call9{
background:skyblue;
transform:rotateY(240deg) translateY(80px) translateZ(100px);
}
/*.wrap:hover*/ .call10{
background:skyblue;
transform:rotateY(270deg) translateY(90px) translateZ(100px);
transition:cubic-bezier(0.75, 0.18, 0.13, 1.03);
}
/*.wrap:hover */.call11{
background:skyblue;
transform:rotateY(300deg) translateY(100px) translateZ(100px);
}
/*.wrap:hover*/ .call12{
background:skyblue;
transform:rotateY(330deg) translateY(110px) translateZ(100px);
}
/*.wrap:hover*/ .call13{
background:skyblue;
transform:rotateY(360deg) translateY(120px) translateZ(100px);
}
/*.wrap:hover*/ .call14{
background:skyblue;
transform:rotateY(390deg) translateY(130px) translateZ(100px);
}
/*.wrap:hover*/ .call15{
background:skyblue;
transform:rotateY(420deg) translateY(140px) translateZ(100px);
}
/*.wrap:hover*/ .call16{
background:skyblue;
transform:rotateY(450deg) translateY(150px) translateZ(100px);
}
/*.wrap:hover*/ .call17{
background:skyblue;
transform:rotateY(480deg) translateY(160px) translateZ(100px);
}
/*.wrap:hover */.call18{
background:skyblue;
transform:rotateY(510deg) translateY(170px) translateZ(100px);
}
/*.wrap:hover*/ .call19{
background:skyblue;
transform:rotateY(540deg) translateY(180px) translateZ(100px);
}
/*.wrap:hover*/ .call20{
background:skyblue;
transform:rotateY(570deg) translateY(190px) translateZ(100px);
}
/*.wrap:hover*/ .call21{
background:skyblue;
transform:rotateY(600deg) translateY(600px) translateZ(100px);
}
/*.wrap:hover*/ .call22{
background:skyblue;
transform:rotateY(630deg) translateY(630px) translateZ(100px);
}
/*.wrap:hover*/ .call23{
background:skyblue;
transform:rotateY(670deg) translateY(670px) translateZ(100px);
}
/* .wrap:hover*/ .call24{
background:skyblue;
transform:rotateY(700deg) translateY(700px) translateZ(100px);
}
/*.wrap:hover*/ .call25{
background:skyblue;
transform:rotateY(730deg) translateY(730px) translateZ(100px);
}
/*.wrap:hover*/ .call26{
background:skyblue;
transform:rotateY(760deg) translateY(760px) translateZ(100px);
}
/*.wrap:hover*/ .call27{
background:skyblue;
transform:rotateY(790deg) translateY(790px) translateZ(100px);
}
/* .wrap:hover*/ .call28{
background:skyblue;
transform:rotateY(820deg) translateY(820px) translateZ(100px);
}
/*.wrap:hover*/ .call29{
background:skyblue;
transform:rotateY(850deg) translateY(850px) translateZ(100px);
}
/*.wrap:hover*/ .call30{
background:skyblue;
transform:rotateY(880deg) translateY(880px) translateZ(100px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="call1">1</div>
<div class="call2">2</div>
<div class="call3">3</div>
<div class="call4">4</div>
<div class="call5">5</div>
<div class="call6">6</div>
<div class="call7">7</div>
<div class="call8">8</div>
<div class="call9">9</div>
<div class="call10">10</div>
<div class="call11">11</div>
<div class="call12">12</div>
<div class="call13">13</div>
<div class="call14">14</div>
<div class="call15">15</div>
<div class="call16">16</div>
<div class="call17">17</div>
<div class="call18">18</div>
<div class="call19">19</div>
<div class="call20">20</div>
</div>
</body>
</html>
Css style - round ladder 3d
Guess you like
Origin blog.csdn.net/weixin_44599809/article/details/103463591
Recommended
Ranking