<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 旋转硬币</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.coin {
width: 100px;
height: 100px;
position: relative;
perspective: 800px;
margin: 50px auto;
}
.coin-inner {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
.coin-front, .coin-back {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
backface-visibility: hidden; /* 关键属性，防止背面在旋转过程中可见 */
}
.coin-front {
background-color: #ffd700; /* 金色 */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #333;
}
.coin-back {
background-color: #c0c0c0; /* 银色 */
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #333;
}
.coin:hover .coin-inner {
transform: rotateY(180deg); /* 鼠标悬停时旋转180度 */
}
</style>
</head>
<body>
<div class="coin">
<div class="coin-inner">
<div class="coin-front">正面</div>
<div class="coin-back">反面</div>
</div>
</div>
</body>
</html>
代码解释:
- HTML 结构: 一个
coindiv 作为容器，内部包含coin-inner，coin-inner再包含coin-front和coin-back两个面。 - CSS 样式:
perspective: 设置透视效果，值越大，透视效果越弱。transform-style: preserve-3d;: 使子元素在3D空间中呈现。backface-visibility: hidden;: 这是关键属性，它隐藏了背面，防止在旋转过程中看到背面。transform: rotateY(180deg);: 旋转180度，用于初始化背面。transition: transform 1s ease-in-out;: 设置旋转动画，1秒钟，ease-in-out缓动效果。:hover: 鼠标悬停时触发旋转动画。
如何使用:
- 将代码保存为 HTML 文件 (例如
coin.html)。 - 使用浏览器打开该文件。
- 鼠标悬停在硬币上，即可看到硬币翻转的效果。
进阶用法:
- 自定义旋转角度: 可以修改
rotateY的值来控制旋转角度，例如rotateY(360deg)旋转一圈。 - 添加点击事件: 可以使用 JavaScript 添加点击事件，实现点击翻转硬币的效果。
- 更真实的硬币效果: 可以使用图片代替背景颜色，并添加阴影等效果，使硬币看起来更真实。
希望这个例子对您有所帮助！
标签：css3,center,硬币,transform,旋转,rotateY,手写,coin From： https://www.cnblogs.com/ai888/p/18573740