当前位置：首页 > article >正文

【css酷炫效果】纯CSS实现立体纸张折叠动效

article 2025/3/18 19:04:46

【css酷炫效果】纯CSS实现立体纸张折叠动效

缘
创作背景
html结构
css样式
完整代码
效果图

通过CSS 3D变换实现立体纸张折叠动效，模拟真实纸张被折叠的物理效果。想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490489

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="paper-fold">
    <div class="paper-front">正面内容</div>
    <div class="paper-back">背面内容</div>
</div>

css样式

.paper-fold {
    position: relative;
    width: 300px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 1s ease;
}

.paper-fold:hover {
    transform: rotateX(120deg);
}

.paper-front, .paper-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.paper-back {
    transform: rotateX(180deg);
    background: #f0f0f0;
}

完整代码

<!DOCTYPE html>
<html>
<head>
<style>
.paper-fold {
    position: relative;
    width: 300px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 1s ease;
}

.paper-fold:hover {
    transform: rotateX(120deg);
}

.paper-front, .paper-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.paper-back {
    transform: rotateX(180deg);
    background: #f0f0f0;
}

</style>
</head>
<body>
    <div style='text-align:center;margin-top:50px;'>
		<div class="paper-fold">
			<div class="paper-front " >
				<img  class="card" src='b.png' style='height:400px;width:600px'/>
			</div>
			<div class="paper-back ">
				<img  class="card" src='b.gif'  style='height:800px;width:600px'/>
			</div>
		</div>
	</div>
	
</body>
</html>