css动画翻开折叠生日贺卡

最新推荐文章于 2022-06-08 21:50:38 发布

神奇大叔

最新推荐文章于 2022-06-08 21:50:38 发布

阅读量968

点赞数

分类专栏： css动画进阶文章标签： css3

本文链接：https://blog.csdn.net/weixin_43294560/article/details/106864285

版权

css动画进阶专栏收录该内容

13 篇文章 1 订阅

订阅专栏

做法:
	平面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>