<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>方框1-作业1</title>
<style type="text/css">
body{
perspective:1500px;
}
.wrap{
width:100px;
height:100px;
/*border:1px solid red;*/
margin:200px auto;
transform-style: preserve-3d;
position: relative;
transition:20s;
}
.wrap:hover{
transform:rotateY(720deg) /*rotateZ(3600deg)rotateX(360deg)*/;
}
.wrap div{
width:180px;
height:180px;
border:1px solid gold;
backface-visibility: hidden;
text-align:center;
line-height:180px;
position: absolute;
top:0;
left:0;
transition:3s;
}
.con1{
background:red;
transform:rotateY(0deg) translateZ(400px);
}
.con2{
background:orange;
transform:rotateY(30deg) translateZ(400px);
}
.con3{
background:green;
transform:rotateY(60deg) translateZ(400px);
}
.con4{
background:blue;
transform:rotateY(90deg) translateZ(400px);
}
.con5{
background:plum;
transform:rotateY(120deg) translateZ(400px);
}
.con6{
background:salmon;
transform:rotateY(150deg) translateZ(400px);
}
.con7{
background:firebrick;
transform:rotateY(180deg) translateZ(400px);
}
.con8{
background:darkgoldenrod;
transform:rotateY(210deg) translateZ(400px);
}
.con9{
background:palevioletred;
transform:rotateY(240deg) translateZ(400px);
}
.con10{
background:fuchsia;
transform:rotateY(270deg) translateZ(400px);
}
.con11{
background:teal;
transform:rotateY(300deg) translateZ(400px);
}
.con12{
background:darkolivegreen;
transform:rotateY(330deg) translateZ(400px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="con1">1</div>
<div class="con2">2</div>
<div class="con3">3</div>
<div class="con4">4</div>
<div class="con5">5</div>
<div class="con6">6</div>
<div class="con7">7</div>
<div class="con8">8</div>
<div class="con9">9</div>
<div class="con10">10</div>
<div class="con11">11</div>
<div class="con12">12</div>
</div>
</body>
</html>
Css style - box 3d
Guess you like
Origin blog.csdn.net/weixin_44599809/article/details/103463613
Recommended
Ranking