3D滑动块
<style>
body{
background-color: black;
position: relative;
transform-style: preserve-3d;
perspective: 3000px;
}
.box_big{
}
.box{
float: left;
margin-top: 100px;
margin-left: 80px;
width: 100px;
height: 80px;
border: 2px solid white;
}
.one{
transform:translateZ(0px);
}
.two{
transform:translateZ(0px);
}
.three{
transform:translateZ(0px);
}
.four{
transform:translateZ(0px);
}
.five{
transform:translateZ(0px);
}
.six{
transform:translateZ(0px);
}
.one:hover {
transform:translateZ(150px);
background-color:rgb(250, 4, 4) ;
box-shadow: 0px 0px 150px 0px rgb(250, 4, 4,0.4) ;
}
.two:hover {
transform:translateZ(150px);
background-color: rgba(255, 145, 0, 0.4);
box-shadow: 0px 0px 150px 0px rgba(255, 145, 0, 0.4);
}
.three:hover {
transform:translateZ(150px);
background-color: rgba(51, 255, 0, 0.4);
box-shadow: 0px 0px 150px 0px rgba(51, 255, 0, 0.4);
}
.four:hover {
transform:translateZ(150px);
background-color: rgba(35, 0, 189, 0.4);
box-shadow: 0px 0px 150px 0px rgba(35, 0, 189, 0.4);
}
.five:hover {
transform:translateZ(150px);
background-color: rgba(255, 0, 149, 0.4);
box-shadow: 0px 0px 150px 0px rgba(255, 0, 149, 0.4);
}
.six:hover {
transform:translateZ(150px);
background-color: rgba(0, 255, 115, 0.4);
box-shadow: 0px 0px 150px 0px rgba(0, 255, 115, 0.4);
}
</style>
<body>
<div class="box_big">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
</div>
</body>
</html>
3D