Css 变换原点50%垂直

我正在制作一些悬停时翻转的卡片，但无法使变换原点垂直工作。它们应该有50%的原点，这样它们向上和向下移动的幅度一样大，但它们总是向下推

正面
正面

返回
背

转售给intY

正面
正面

返回
背

转售给intY

正面
正面

返回
背

转售给intY

正文{padding:30px；}
.card容器{透视图：1000；显示：内联块；边距：0 3rem；}
.card容器：悬停.card，
.card-container.hover.card{
变换：旋转（180度）比例（1.1）；
}
.card容器、.front、.back{
宽度：210px；
高度：297px；
}
.卡片{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
变换原点：50%；
}
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
填充：20px；
}
.前线{
背景色：#eee；
颜色：#122d40；
z指数：2；
变换：旋转（0度）；/*适用于firefox 31*/
}
.回来{
背景色：#1f7c8f；
变换：旋转（180度）；
}

这里有两个注意事项，水平位置和垂直位置

要保持水平位置，需要计算变换原点的正确值

您向

.front

和

.back

元素添加了填充，这将使元素的总宽度增加40px

您可以使用CSS

calc

函数将偏移量计算为

calc（50%-20px）

，这似乎是可行的

若要解决翻转的

.card

的垂直放置问题，在悬停时，您可以将

.card

的大小放大1.1，以便保持翻转的垂直中心相对于其他元素，您可以将

顶部

偏移添加到过渡

例如，如果您的卡的高度为160px，则该卡的高度将为16px，因此偏移设置

顶部：-8x

（因为

.card

是相对定位的）

body{padding:30px；}
.card容器{透视图：1000；显示：内联块；边距：0 2rem；}
.card容器：悬停.card，
.card-container.hover.card{
变换：旋转（180度）比例（1.1）；
顶部：-8px；/*计算偏移量：160*0.1/2=8*/
}
.card容器、.front、.back{
宽度：100px；
高度：160px；
}
.卡片{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
排名：0；
变换原点：计算（50%+20px）；
}
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
填充：20px；
}
.前线{
背景色：#eee；
颜色：#122d40；
z指数：2；
变换：旋转（0度）；/*适用于firefox 31*/
}
.回来{
背景色：#1f7c8f；
变换：旋转（180度）；
}

正面
正面

返回
背

转售给intY

正面
正面

返回
背

转售给intY

正面
正面

返回
背

转售给intY

嗨，我想不是这样的。我去掉了20px的填充物，当你悬停时，卡仍然向下推动，这没有什么区别。@TheReveller抱歉，我误解了这个问题。你能澄清一下吗？当你在卡片上悬停时，卡片的上边缘应该在哪里？所以，当你悬停时，卡片是1.1倍大，因此翻转卡片的上边缘应该比未翻转的卡片略高，同样，下边缘也应该略低相同的数量？@TheReveller我又尝试了一个解决方案，请稍等片刻再看一看，谢谢。谢谢Marc。成功了。我不明白为什么我不能设置垂直原点。增加一个职位感觉像是一个黑客。

<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);
}