css - 变换原点 50% 垂直

Question

我正在制作一些在悬停时翻转的卡片，但无法让变换原点垂直工作。它们应该有 50% 的原点，这样它们向上和向下移动的次数一样多，但它们始终只是向下推。

http://codepen.io/rachelreveley/pen/oxVOeL

<div class="column">
    <div class="card-container card-1">
        <div class="card">
            <div class="front">
                <h3>Front</h3>
                <p>Front</p>
            </div>
            <div class="back">
                <h3>Back</h3>
                <p>Back</p>
                <p><a class="button">Resell with intY</a></p>
            </div>
        </div>
    </div>
    <div class="card-container card-2">
        <div class="card">
            <div class="front">
                <h3>Front</h3>
                <p>Front</p>
            </div>
            <div class="back">
                <h3>Back</h3>
                <p>Back</p>
                <p><a class="button">Resell with intY</a></p>
            </div>
        </div>
    </div>
    <div class="card-container card-3">
        <div class="card">
            <div class="front">
                <h3>Front</h3>
                <p>Front</p>
            </div>
            <div class="back">
                <h3>Back</h3>
                <p>Back</p>
                <p><a class="button">Resell with intY</a></p>
            </div>
        </div>
    </div>
</div>

body {padding: 30px;}
.card-container {perspective: 1000; display: inline-block; margin: 0 3rem;}
.card-container:hover .card,
.card-container.hover .card {
    transform: rotateY(180deg) scale(1.1);
}
.card-container, .front, .back {
    width: 210px;
    height: 297px;
}
.card {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
     transform-origin: 50%;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
}
.front {
    background-color: #eee;
    color: #122d40;
    z-index: 2;
    transform: rotateY(0deg);   /* for firefox 31 */
}
.back {
    background-color: #1f7c8f;
    transform: rotateY(180deg);
}

Answer 1

这里有两个考虑因素，水平位置和垂直位置。

要保持水平位置，您需要为 transform-origin 计算正确的值。

您向 .front 和 .back 元素添加了填充，这使元素的宽度总共增加了 40 像素。

您可以使用 CSS calc 函数将偏移量计算为 calc(50% - 20px)，这似乎可行。

要解决翻转的 .card 的垂直放置问题，悬停时，将 .card 的大小放大 1.1，以便保持翻转相对于其他元素垂直居中，您可以将 top 偏移量添加到过渡。

例如，如果你的卡片高度为 160px，则卡片将高 16px，因此偏移设置 top: -8x(因为 .card 是相对定位的) .

body {padding: 30px;}
.card-container {perspective: 1000; display: inline-block; margin: 0 2rem;}
.card-container:hover .card,
.card-container.hover .card {
	transform: rotateY(180deg) scale(1.1);
    top: -8px; /* compute offset: 160*0.1/2 = 8 */
}
.card-container, .front, .back {
	width: 100px;
	height: 160px;
}
.card {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
    top: 0;
	transform-origin: calc(50% + 20px);
}
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
}
.front {
	background-color: #eee;
	color: #122d40;
	z-index: 2;
	transform: rotateY(0deg);	/* for firefox 31 */
}
.back {
	background-color: #1f7c8f;
	transform: rotateY(180deg);
}

<div class="column">
  <div class="card-container card-1">
    <div class="card">
      <div class="front">
        <h3>Front</h3>
        <p>Front</p>
      </div>
      <div class="back">
        <h3>Back</h3>
        <p>Back</p>
        <p><a class="button">Resell with intY</a>
        </p>
      </div>
    </div>
  </div>
  <div class="card-container card-2">
    <div class="card">
      <div class="front">
        <h3>Front</h3>
        <p>Front</p>
      </div>
      <div class="back">
        <h3>Back</h3>
        <p>Back</p>
        <p><a class="button">Resell with intY</a>
        </p>
      </div>
    </div>
  </div>
  <div class="card-container card-3">
    <div class="card">
      <div class="front">
        <h3>Front</h3>
        <p>Front</p>
      </div>
      <div class="back">
        <h3>Back</h3>
        <p>Back</p>
        <p><a class="button">Resell with intY</a>
        </p>
      </div>
    </div>
  </div>
</div>