css动画 3d立体透明筛子

布满荆棘的人生 2021-07-24 18:51 444阅读 0赞

做法:
    	6个div重叠,设置旋转中心点为z轴上某一点,按水平四个面,分别按中心点
    	旋转90度、180度、270度等,上下两个面，分别将旋转点设置在div的上边线和下边线,再分别绕x轴旋转对应的90度

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    			width: 400px;
    			height: 400px;
    			/* border: solid 1px blueviolet; */
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			transform-style:preserve-3d ;
    			transform: perspective(900px) ;
    			margin: 100px auto;
    			transition: 2s;
    			transform-origin: center center 100px;  
    
    		}
    		.box:hover{ 
    			
    			transform: perspective(2000px) rotateX(180deg) rotateY(180deg);
    		}
    
    		.box>div{ 
    			width: 200px;
    			height: 200px;
    			position: absolute;
    			background-color: red;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			font-size: 4em;
    			transform-origin: center center 100px;  
    			opacity: 0.2;
    		}
    		
    		.box>div:nth-child(1){ 
    			background-color: darkblue;
    			transform:rotateY(90deg);
    		}
    		.box>div:nth-child(2){ 
    			background-color: green;
    			transform:rotateY(180deg);
    		}
    		.box>div:nth-child(3){ 
    			background-color: cadetblue;
    			transform:rotateY(270deg);
    		}
    		.box>div:nth-child(4){ 
    			background-color: violet;
    			transform:rotateY(360deg);
    		}
    		.box>div:nth-child(5){ 
    			background-color: chocolate
    			transform-origin: top;
    			transform:rotateX(90deg);
    		}
    		.box>div:nth-child(6){ 
    			background-color: palegoldenrod;
    			transform:rotateX(-90deg);
    		}
    		
    		
    		 
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    			<div>4</div>
    			<div>5</div>
    			<div>6</div>		
    
    		</div>
    		
    	</body>
    </html>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621135643318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/ac34bb4e6e354a50be5843c917d97005.png