手写一个使用css3旋转硬币的效果 

<!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 结构: 一个 coin div 作为容器，内部包含 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: 鼠标悬停时触发旋转动画。

如何使用:

  1. 将代码保存为 HTML 文件 (例如 coin.html)。
  2. 使用浏览器打开该文件。
  3. 鼠标悬停在硬币上，即可看到硬币翻转的效果。

进阶用法:

  • 自定义旋转角度: 可以修改 rotateY 的值来控制旋转角度，例如 rotateY(360deg) 旋转一圈。
  • 添加点击事件: 可以使用 JavaScript 添加点击事件，实现点击翻转硬币的效果。
  • 更真实的硬币效果: 可以使用图片代替背景颜色，并添加阴影等效果，使硬币看起来更真实。

希望这个例子对您有所帮助！

posted @   王铁柱6  阅读(20)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示