【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>
效果图
