html - 在 CSS 中创建一个饮用 jar /瓶对象

Question

所以我正在帮助一个经营能量饮料业务的拥有网站的人。他让我做的任务之一是将网站上的饮料显示为 3D 对象，因此当光标悬停在产品上时，它会像 3D 对象一样旋转(用户将从前面从侧面绕过，标签/ jar 头的背面，侧面和前面)。现在，这听起来很有挑战性，但我之前就放弃了。我能够做到这一点的唯一方法是使用 preserve-3d 变换样式将正面图像变换到背面，并逐渐平移以赋予它非常酷的旋转效果。 (我将在下面显示代码)。不管怎样，我给他发了一段我的工作视频，他要我制作他通过电子邮件发给我的标签，把它们变成 jar 头或瓶子，使它更逼真……我只是想知道这可能吗？我的意思是制作两个旋转的背景图像和悬停的文本以给它一个非常酷的 3D 很难，但是有四个图像旋转并让它看起来像一个 jar 头/瓶子在 CSS 中似乎是不可能的。这种工作应该在工作室里完成吗？在产品周围拍照并由 3D 工作室程序创建？让我知道您对这项任务的看法。

:root {
  --level-one: translateZ(3rem);
  --level-two: translateZ(6rem);
  --level-three: translateZ(9rem);
  --fw-normal: 400;
  --fw-bold: 700;
  --clr: #b7c9e5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: 'Oswald', sans-serif;
}

.card {
  width: 400px;
}

.card__content {
  text-align: center;
  position: relative;
  padding: 15em 5em;
  transition: transform 3s;
  // background: pink;
  transform-style: preserve-3d;
}

.card:hover .card__content {
  transform: rotateY(.5turn);
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5em 3em;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  display: grid;
  align-content: center;
}

.card__front {
  background-color: var(--clr);
  background-image: url(amorpure.png);
  background-size: cover;
  background-blend-mode: overlay;
  color: #333;
}

.card__front::before {
  content: '';
  position: absolute;
  --spacer: 1em;
  top: var(--spacer);
  bottom: var(--spacer);
  left: var(--spacer);
  right: var(--spacer);
  border: 3px solid currentColor;
  transform: var(--level-one);
}

.card__title {
  font-size: 3.5rem;
  transform: var(--level-three);
  order: 2;
  text-transform: uppercase;
}

.card__subtitle {
  transform: var(--level-two);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: .75rem;
  font-weight: var(--fw-bold);
  opacity: .7;
}

.card__body {
  transform: var(--level-two);
  font-weight: var(fw-normal);
  font-size: 1.5rem;
  line-height: 1.6;
}

<div class="card">
  <div class="card__content">

    <div class="card__front">
      <h3 class="card__title">Amorpure</h3>
      <p class="card__subtitle">Beverages</p>
    </div>

    <div class="card__back">
      <p class="card__body">Amor’s universal meaning (the Latin name of the Roman God of Love) is the platform for our global brand commitment to bring both the product family and the brand ethos to every continent.</p>
    </div>

  </div>
</div>

Answer 1

就我个人而言，这听起来更像是一项动画工作，而不是使用 CSS 来完成。在 codepen 中快速浏览我发现了这个 https://codepen.io/webdeveloperpr/pen/zBGqqE

 <div class="bottle">
    <img src="//framework.blcmsdev.com/images/product.png"/>
    <div class="label">
        <div class="side"></div>
        <div class="side"></div>

.瓶子是一个固定的 png 图像，但标签本身是多个移动的元素，使它看起来像瓶子在旋转。