css3四棱柱3d翻转

水深无声 2022-10-05 12:57 129阅读 0赞

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