问题3D转换div翻转与文本功能区上面

时间：2015-02-02 14:16:37

标签： css css3 css-shapes

我创建了一个展示产品图片的产品包装盒，当它翻转时显示产品的详细信息并且效果很好。问题是当这个产品上有丝带并翻转时，色带中的文字也会翻转（它的位置是正确的），我需要以某种方式对此文本进行额外的转换，以便即使翻转也能正确显示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>

2 个答案:

答案 0 :(得分：4)

只需复制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>

答案 1 :(得分：3)

  

注意：我最初误解了这个问题并发布了错误的答案。不想删除它，因此修改了原始答案仍然解决了问题，尽管在此过程中使其更复杂。 Tambo的答案提供了最好的方法。如果由于某种原因希望在不重复元素的情况下实现效果，则可以使用此方法。

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

此后，整个色带被所需的像素（复杂部分）平移，以定位在屏幕的左侧。现在，即使位置正确，色带也必须反向旋转，使其看起来像一个色带，因此添加rotate(-90deg)（元素最初旋转45度时为-90度）必须无效才能回到正常位置，然后我们必须反向旋转45度。）

注意：动画/过渡效果并不好，但我认为你可以解决这个问题。

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

相关问题
最新问题