Question

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

＆＃13;

.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);
}

＆＃13;

<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/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    <div class="back">
      Wszystko za darmo
    </div>
  </div>
</div>

＆＃13;

Answer 1

我迷失了为什么它不适合你。我已经调整了一些代码，但如果没有大量代码，很难确定可能导致问题的原因。

我注意到你的z-index为-1。我猜测，因为你说它没有什么作用，它是试错的剩余。

我拿出相对位置，重新定位你的绝对位置，并修正你的z指数。

据我所知，它正在发挥作用。您的代码中可能存在更深层次的问题。

＆＃13;

.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);
}

＆＃13;

<!-- 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/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    
    <div class="back">
       Wszystko za darmo
    </div>
  </div>
</div>

＆＃13;

Answer 2

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

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

由于它们属于同一个属性，因此会覆盖另一个属性。

相反，连接值

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

＆＃13;

.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);
}

＆＃13;

<!-- 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/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    
    <div class="back">
       Wszystko za darmo
    </div>
  </div>
</div>

＆＃13;

css 3d旋转和放大对象

2 个答案: