css动画翻开折叠生日贺卡

柔情只为你懂 2021-07-24 22:55 348阅读 0赞

做法:
    	平面div,设置前后伪类分别覆盖一半大小,设置前面的伪类旋转点为最左边的线,旋转角度为负值向外
    	设置后面的伪类旋转点为最右边的线,旋转角度为正值向内
    	设置最外层元素transform-style: preserve-3d;可以查看3d效果
    	transform: perspective(900px) rotateX(45deg) rotateY(25deg);透视和旋转一定角度增强立体感

代码示例:

<!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;
    		}
    		
    		.d1{ 
    			width: 300px;
    			height: 200px;
    			background-color: orange;
    			position: relative;
    			transform-style: preserve-3d;
    			transform: perspective(900px) rotateX(45deg) rotateY(25deg);
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			color: white;
    		}
    		.d1::before,.d1::after
    		{ 
    			content: '';
    			background-color:#E34336;
    			width: 50%;
    			height: 100%;
    			position:absolute;
    			border-right: solid 2px orange;
    			box-sizing: border-box;
    		}
    		.d1::before{ 
    			content: '生日';
    			color: white;
    			left: 0;
    			top: 0;
    			display: flex;
    			justify-content: flex-end;
    			align-items: center;
    			transition: 2s;
    			transform-origin: left;
    			
    		}
    		.d1::after{ 
    			content: '贺卡';
    			color: white;
    			right: 0;
    			top: 0;
    			display: flex;
    			justify-content: flex-start;
    			align-items: center;
    			transition: 2s;
    			transform-origin: right;
    		}
    		
    		.d1:hover::before{ 
    			transform:rotateY(-180deg);
    		}
    		.d1:hover::after{ 
    			transform:rotateY(180deg);
    		}
    
    		
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<div class='d1'>生日快乐</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 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619215147235.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]: https://img-blog.csdnimg.cn/20200619215151452.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 2]: /images/20210724/228c6a2f0dcf4d8f9af46827ada469b0.png