css3四棱柱3d翻转

 本篇介绍了如何使用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>