纯css反转效果——支持正反显示不同

1年前发布

250

文章目录[隐藏]

源码入下

源码入下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<link rel="stylesheet" href="./index.css">
	<style>
		.box{
            width: 270px;
            height: 334px;
			border: solid 1px blueviolet;
			display: flex;
			align-items: center;
			justify-content: center;
			perspective: 900px;
		}
		.box>div{
            width: 239px;
            height: 334px;
			position: absolute;
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 4em;
			transition: 2s;
			backface-visibility: hidden;
		}
		
		.box>div:nth-child(1){
			background-color: blue;
			transform: rotateY(0deg);
		}
		.box>div:nth-child(2){
			transform: rotateY(180deg);
			background-color: cadetblue;
		}
		.box:hover div:nth-child(1)
		{
			transform: rotateY(180deg);
			background-color: blue;
		}
		.box:hover div:nth-child(2)
		{
			transform: rotateY(0deg);
			background-color: cadetblue;
		}
	</style>
	</head>
	<body class='me'>
		<div class='box'>
			<div>正面</div>
			<div>反面</div>
		</div>
		
		<div class='box'>
			<div>正面</div>
			<div>反面</div>
		</div>
        
	</body>
</html>

评分

欢迎为Ta评分

赞赏