代码之家 › 专栏 › 技术社区 › Dawid Czaja

css 3d旋转和放大对象

css-transforms css html

Dawid Czaja · 技术社区 · 8 年前

我尝试旋转图像并放大它(最好显示在屏幕中央),但它不起作用。第二个问题是,当一个对象增长时,它位于其他对象之下( 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/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
    </div>
    <div class="back">
      Wszystko za darmo
    </div>
  </div>
</div>

2 回复 | 直到 8 年前

vals 8 年前

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

Jaime 8 年前

我不明白为什么它不适合你。我已经调整了一些代码,但如果没有大量的代码,很难确定是什么导致了您的问题。

我去掉了相对位置,重新定位了你的绝对位置,并固定了你的z指数。

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

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