<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>骰子3D图</title>
<style class="text/css">
.wrap{
width:100px;
height:100px;
border:1px solid glod;
transform-style:preserve-3d;
position:relative;
margin:200px auto;
transform:rotateY(45deg) rotateX(45deg) rotateZ(45deg);
transition:5s;
}
.wrap:hover{
transform:rotateY(720deg) rotateX(45deg) rotateZ(45deg);
}
.wrap div{
width:100px;
height:100px;
text-align:center;
line-height:100px;
color:white;
position:absolute;
top:0;
left:0;
transition:3s;
opacity:0.5;
}
/*.wrap:hover*/ .box1{
background:red;
transform:rotateY(90deg) translateZ(50px);
}
/*.wrap:hover */.box2{
background:yellow;
transform:rotateY(90deg) translateZ(-50px);
}
/*.wrap:hover*/ .box3{
background:green;
transform:rotateX(90deg) translateZ(50px);
}
/*.wrap:hover*/ .box4{
background:blue;
transform:rotateX(90deg) translateZ(-50px);
}
/*.wrap:hover*/ .box5{
background:plum;
transform:translateZ(-50px);
}
/*.wrap:hover*/ .box6{
background:black;
transform:translateZ(50px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
</html>
Css样式--骰子3d
最新推荐文章于 2021-06-18 04:26:51 发布