css立方体

水深无声 2023-06-24 08:16 96阅读 0赞

### css立方体 ###

先分别给立方体六个面6个div

<div class="cube">
    		<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>

然后css设置六个面的属性：

.cube {
    			width: 200px;
    			height: 200px;
    			/*border: 1px solid red;*/
    			margin: 200px auto;
    
    			position: relative;
    
    			transform-style: preserve-3d;
    			perspective: 1000px;
    			transform: rotateX(30deg) rotateY(45deg);
    
    
    		}
    
    		.cube:hover{
    			animation: rotate 1s  infinite linear;
    		}
    
    		.cube > div {
    			width: 200px;
    			height: 200px;
    			text-align: center;
    			line-height: 200px;
    			/*background: skyblue;*/
    			/*margin-bottom: 10px;*/
    			opacity: 0.5;
    
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    
    		.left{
    			background: red;
    			transform: rotateY(90deg);
    			margin-left: -100px;
    		}
    
    		.right {
    			background: orange;
    			transform: rotateY(-90deg);
    			margin-left: 100px;
    		}
    
    		.top {
    			background: yellow;
    			transform: rotateX(90deg);
    			margin-top: -100px;
    		}
    
    		.bottom {
    			background: gray;
    			transform: rotateX(-90deg);
    			margin-top: 100px;
    		}
    
    		.back {
    			background: url("../images/y.jpg");
    			transform: rotateZ(180deg);
    			transform: translateZ(-100px);
    		}
    
    		.front {
    			background: cyan;
    			transform: translateZ(100px);
    		}
    
    		@keyframes rotate{
    			form{
    				transform: rotate3d(0,0,0,0deg);
    			}
    			to{
    				transform: rotate3d(1,1,1,360deg);
    			}
    		}

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70][]

触摸立方体会旋转90度。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221212135106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70