在卡片翻转上转换比例

时间：2018-06-07 17:27:02

标签： html css css-transforms

如何在css的卡片翻转动画中使用transform:scale()？当我在transform:scale(0.75);上放置.container并悬停以翻转卡片时，transform会消失？有人有想法吗？谢谢你提前。

请使用chrome或safari查看问题。

＆＃13;
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

html, body { 
  height: 100%;
  width: 100%; 
  margin: 0; 
  padding: 0; 
  background-color:#eaeaea;}

.container {
  width:900px;
  height:550px;
  background-color:white;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.right-div {
  width:540px;
  height:550px;
  background-image:url();
  transform:scale(1);
  background-position: -170px 0px; 
  background-size:cover;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;}

.left-div {
  width:323px;
  height:550px;
  background-color:white;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  margin: auto;}

.content-name {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 10px;
    text-transform: uppercase;
    color: #7E7E7E;    
    font-weight: 700;
    margin-top:160px;
    margin-left:40px;}

.content-title {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #2C2C2C;
    margin-top:10px;
    margin-left:40px;}

.content-description {
    margin-top: -20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #7e7e7e;
    line-height: 22px;
    margin-left:40px;}

.content-link {
    position:absolute;
    margin-top:20px;
    color: #2C2C2C;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    margin-left:40px;}





/*Flip*/

.flip-container {
  -webkit-perspective: 1000;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);}

.flip-container:hover .flipper, .flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);}

.flip-container, .front, .back {
	width: 900px;
	height: 550px;}

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

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

.front {
  z-index: 2;}

.back {
  -webkit-transform: rotateY(180deg);
  background: white;}
＆＃13; 
<div class="flip-container">
	<div class="flipper">
		<div class="front">
<div class="container">
  <div class="left-div">
      <p class="content-name">title</p>
      <p class="content-title">name</p>
    <p class="content-description">Sed ut perspiciatis unde omnis iste natus <br/> error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    <a href="#" class="content-link">Link</a>
  </div>
  <div class="right-div">
  </div>
  </div>
    </div>
    <div class="back">
      :p
		</div>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

卡的背面应该有180度的变换。由于它是背面，它已经翻转了180度。对于我在Firefox 60中，即使scale(0.75)应用于.container，这仍然可以正常工作。换句话说，我无法重现你说的问题，但我确实注意到你的卡不像卡片那样。

＆＃13;
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #eaeaea;
}

.container {
  width: 900px;
  height: 550px;
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: scale(0.75);
}

.right-div {
  width: 540px;
  height: 550px;
  background-image: url();
  transform: scale(1);
  background-position: -170px 0px;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.left-div {
  width: 323px;
  height: 550px;
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.content-name {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 3px;
  font-size: 10px;
  text-transform: uppercase;
  color: #7E7E7E;
  font-weight: 700;
  margin-top: 160px;
  margin-left: 40px;
}

.content-title {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  letter-spacing: 3px;
  font-weight: 700;
  color: #2C2C2C;
  margin-top: 10px;
  margin-left: 40px;
}

.content-description {
  margin-top: -20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #7e7e7e;
  line-height: 22px;
  margin-left: 40px;
}

.content-link {
  position: absolute;
  margin-top: 20px;
  color: #2C2C2C;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 3px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  margin-left: 40px;
}


/*Flip*/

.flip-container {
  perspective: 1000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: visible;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 900px;
  height: 550px;
}

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

.front,
.back {
  position: absolute;
  top: 0;
  bottom: 0;
}

.front {
  backface-visibility: hidden;
  background: white;
}

.back {
  backface-visibility: hidden;
  background: red;

  /* this is the line you were missing */
  transform: rotateY(180deg);
}
＆＃13; 
<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <div class="container">
        <div class="left-div">
          <p class="content-name">title</p>
          <p class="content-title">name</p>
          <p class="content-description">Sed ut perspiciatis unde omnis iste natus <br/> error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
          <a href="#" class="content-link">Link</a>
        </div>
        <div class="right-div">
        </div>
      </div>
    </div>
    <div class="back">
      :p
      <h1> you have to put the snippet in fullscreen mode because this card is really big </h1>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

我不知道这对您来说是否是一个很好的解决方法，但您可以尝试将transform: scale(0.75)设置为.front和.back类，而不是{{1} }。

.container
相关问题
最新问题