本篇介绍了如何使用css3制作3d四棱柱翻转的效果,在页面点击按钮或其他场景下可参考使用
相关css3参数
perspective
transform-style
transform-origin
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
.container {
width:200px;
height:200px;
margin:200px auto;
}
.box {
perspective:500px;
position:relative;
}
.content {
width:305px;
height:50px;
transform-style:preserve-3d;
transform: rotateX(-5deg);
transform-origin: 0 25px 0;
}
.content div {
width: 300px;
height: 50px;
color: #fff;
position:absolute;
text-align:center;
line-height:50px;
font-size:20px;
}
.left {
left:-25px;
transform:rotateY(-90deg);
background-color:rgba(36,85,75,1);
}
.right {
left:275px;
transform:rotateY(90deg);
background-color:rgba(36,85,75,1);
}
.front {
transform:translateZ(25px);
background-color:rgba(36,85,75,1);
/*box-shadow:inset 0px -9px 0px -4px rgb(50,132,115,1);*/
}
.back {
transform:translateZ(-25px) rotateY(180deg) rotateZ(180deg);
background-color:rgba(36,85,75,1);
/*box-shadow:inset 0px -9px 0px -4px rgb(50,132,115,1);*/
}
.top {
top:-25px;
transform:rotateX(90deg);
background-color:rgba(50,132,115,1);
/*box-shadow:inset 0px -9px 0px -4px rgb(36,85,75,1);*/
}
.bottom {
top:25px;
transform:rotateX(-90deg);
background-color:rgba(50,132,115,1);
/*box-shadow:inset 0px -9px 0px -4px rgb(36,85,75,1);*/
}
.left,.right{
width: 50px!important;
height: 50px!important;
}
@keyframes run {
0% {
transform:rotateX(-5deg);
}
100% {
transform:rotateX(360deg);
}
}
.content:hover{
animation:run 2s forwards;
cursor: pointer;
}
<div class="container">
<div class="box">
<div class="content">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
</div>