问题 3D 转换 div 以在其上带有文本功能区的情况下翻转

Question

我创建了显示产品图片的产品框，当鼠标悬停在上面时会翻转以显示产品的详细信息，效果很好。问题是当这个产品上有色带并翻转时，色带中的文本也会翻转（它的位置是正确的），我需要以某种方式额外转换此文本，以便即使在翻转时它也能正确显示 TOP。可能吗？

.ribbon-wrapper-green {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 5;
}

.ribbon-green {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-green:before {
    left: 0;
}

.ribbon-green:after {
    right: 0;
}

.product-box {
    width: 292px;
    height: 340px;
}

.thumb-wrapper {
    height: 100%;
    background-color: purple;
}

.product-box img {
    width: 100%;
    position: absolute;
    display: block;
    backface-visibility: hidden;
}

.product-box .thumb-detail {
    width: 100%;
    height: 100%;
    position: absolute;
    background: blue;   
    backface-visibility: hidden;
}
.product-box.flip {
    perspective: 800px;
}

.product-box.flip .thumb-wrapper {
    transition: transform 1s;
    transform-style: preserve-3d;
}

.product-box.flip .thumb-detail, .product-box.flip:hover .thumb-wrapper {
    transform: rotateY(-180deg);
}

<div class="product-box flip">
    <div class="thumb-wrapper">
        <div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
        <img src="#" alt="" title="" height="262" width="262">
        <div class="thumb-detail">
        </div>
    </div>
</div>

Answer 1

Note: I had initially misunderstood the question and posted a wrong answer. Did not want to delete it and hence have modified the original answer to still solve the problem albeit making it more complex in the process. The best approach is provided in Tambo's answer. You can use this method if you for some reason wish to achieve the effect without duplicating elements.

您可以通过在 div 上添加 rotateY(-180deg) 和 class="ribbon-wrapper-green" 并将其放在另一侧来实现。原来的定位是 right: -3px，悬停时，我们将其更改为 left: -3px 或 right: 210px;（方框宽度 292px + 偏移量 3px - 功能区容器宽度 85px）。

在此之后，整个功能区将平移所需的像素（复数部分）以定位在屏幕的左侧。现在，即使位置正确，丝带也必须反向旋转以使其看起来像丝带，因此添加了 rotate(-90deg)（-90 度元素最初旋转了 45 度必须取消才能回到正常位置，然后我们必须在相反的方向再旋转 45 度）。

注意：animation/transition效果不是很好，但我认为你可以解决这个问题。

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 5;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-green:before,
.ribbon-green:after {
  content: "";
  border-top: 3px solid #6e8900;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position: absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
.product-box {
  width: 292px;
  height: 340px;
}
.thumb-wrapper {
  height: 100%;
  background-color: purple;
}
.product-box img {
  width: 100%;
  position: absolute;
  display: block;
  backface-visibility: hidden;
}
.product-box .thumb-detail {
  width: 100%;
  height: 100%;
  position: absolute;
  background: blue;
  backface-visibility: hidden;
}
.product-box.flip {
  perspective: 800px;
}
.product-box.flip .thumb-wrapper {
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.product-box.flip .thumb-detail,
.product-box.flip:hover .thumb-wrapper {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.product-box.flip:hover .thumb-wrapper .ribbon-wrapper-green {
  left: -3px;
  -webkit-transform: rotateY(-180deg) translate(-212px) rotate(-90deg);
  transform: rotateY(-180deg) translate(-212px) rotate(-90deg);
}

<div class="product-box flip">
  <div class="thumb-wrapper">
    <div class="ribbon-wrapper-green">
      <div class="ribbon-green">TOP</div>
    </div>
    <img src="#" alt="" title="" height="262" width="262">
    <div class="thumb-detail">
    </div>
  </div>
</div>

Answer 2

只需复制 ribbon-wrapper-green 并在后面旋转它

.card {
    width: 180px;
    height: 180px;
    position: relative;
    -webkit-perspective: 700;
    margin: 0px auto;
}
.card:hover .front{
    -webkit-transform: rotateY(-180deg);  
}
.card:hover .back {
    -webkit-transform: rotateY(0deg);  
}
.card:hover .face {
    -webkit-transition: all 0.3s ease-out;
}
.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.8s ease-out;
}
.front {
    -webkit-transform: rotateY(0deg);
}
.back {
    background: #9dcc78;
    -webkit-transform: rotateY(180deg);
}



.ribbon-wrapper-green {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 5;
}

.ribbon-green {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-green:before {
    left: 0;
}

.ribbon-green:after {
    right: 0;
}

.back .ribbon-wrapper-green {
    top: -4px;
    left: -1px;
    -webkit-transform: rotateZ(-90deg);
    -moz-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}

<div class='card'>
    <div class='front face'>
        <div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
        <img src='http://placehold.it/180x180'/>
    </div>
</div>

问题 3D 转换 div 以在其上带有文本功能区的情况下翻转

Problems 3D transforming div to flip around with text ribbon on it

css

css-shapes