css 3d 旋转和放大对象

Question

我尝试旋转并放大图像（最好显示在屏幕中央），但不起作用。第二个问题是当一个对象增长时，它在其他对象之下（z-index 没有帮助）。谁能帮忙？

.flip-container {
  -webkit-perspective: 1000;
}

.flipped {
  -webkit-transform: scale(2);
  -webkit-transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 350px;
  height: 230px;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  position: absolute;
}

.front {
  z-index: -1;
}

.back {
  -webkit-transform: rotateY(180deg);
}

<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')">
    <div class="front">
      <img id="services_img" src="https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    <div class="back">
      Wszystko za darmo
    </div>
  </div>
</div>

Answer 1

我不明白为什么它对你不起作用。我已经调整了一些代码，但是没有大量代码，很难确定是什么导致了您的问题。

我确实注意到您的 z-index 为 -1。我猜既然你说它没有什么不同，那是反复试验的遗留问题。

我取出了相对位置，重新定位了你的绝对位置，并修复了你的 z-index。

据我所知，它正在运行。您的代码中可能存在更深层次的问题。

.beneath {
  width: 350px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.txt {
  height: 25px;
}

.beneath p {
  float: left;
}

.beneath img {
  width: 100%;
}

.flip-container img {
  width: 100%;
}

.flipped {
  -webkit-transform: scale(2);
  -webkit-transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 350px;
  height: 230px;
  position: absolute;
  top: 0;
  left: 0;
}

.flipper {
  -webkit-transition: 0.6s;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
}

.front {
  z-index: 1;
}

.back {
  -webkit-transform: rotateY(180deg);
}

<!-- elements beneath - example only -->
<div class="beneath txt">
  <p>This is all beneath.</p>
</div>

<div class="beneath">
  <img src="http://via.placeholder.com/350x150" />
</div>


<!-- Original -->
<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')">
    <div class="front">
      <img id="services_img" src="https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    
    <div class="back">
       Wszystko za darmo
    </div>
  </div>
</div>

Answer 2

您不能像这样设置 2 个变换

transform: scale(2);
transform: rotateY(180deg);

因为相同属性，一个会覆盖另一个。

相反，连接值

transform: scale(2) rotateY(180deg);

.beneath {
  width: 350px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.txt {
  height: 25px;
}

.beneath p {
  float: left;
}

.beneath img {
  width: 100%;
}

.flip-container img {
  width: 100%;
}

.flipped {
  transform-origin: center center;
  transform: rotateY(180deg)  scale(2);
}

.flip-container,
.flipper,
.front,
.back {
  width: 350px;
  height: 230px;
  position: absolute;
  top: 0;
  left: 0;
}

.flipper {
  transition: 0.6s;
}

.front,
.back {
  backface-visibility: hidden;
}

.front {
  z-index: 1;
}

.back {
  transform: rotateY(180deg);
}

<!-- elements beneath - example only -->
<div class="beneath txt">
  <p>This is all beneath.</p>
</div>

<div class="beneath">
  <img src="http://via.placeholder.com/350x150" />
</div>


<!-- Original -->
<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')">
    <div class="front">
      <img id="services_img" src="https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    
    <div class="back">
       Wszystko za darmo
    </div>
  </div>
</div>

css 3d 旋转和放大对象

css 3d rotation and enlarge object

html

css

css-transforms