Euchre牌局手牌查看器：旋转div无法贴合父容器左右侧求助

问题分析 #

东西方向的手牌旋转后出现多余空白，核心原因是元素旋转时，盒模型的占位尺寸保持不变：横向排列的手牌（宽度=5×70px=350px，高度=100px）旋转90度后，视觉上变为垂直排列，但容器仍占据350px宽的横向空间，导致边缘出现空白。直接调整left或transform-origin未解决问题，是因为未结合旋转后的坐标系变化调整位移逻辑。

解决方案：调整transform顺序与原点 #

通过修改transform-origin设置旋转基点，再调整位移顺序，让旋转后的手牌贴合边缘，同时适配卡牌数量变化（容器宽度会随卡牌数量自动调整，不会溢出）。

修改后的CSS代码 #

.euchre-table {
    position: relative;
    margin: 20px auto;
    width: 80%;
    height: 500px;
    border: 1px solid #000;
}

.euchre-table .turn-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.euchre-table .hand {
    display: inline-block;
}

/* 左侧手牌（西侧）：以左侧中点为旋转原点，顺时针旋转后调整垂直位置 */
.euchre-table .hand-1 {
    position: absolute;
    top: 50%;
    left: 10px;
    transform-origin: left center;
    /* transform执行顺序从右到左：先旋转90度，再向上位移100%（抵消旋转后的垂直偏移） */
    transform: rotate(90deg) translateY(-100%);
}

.euchre-table .hand-2 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

/* 右侧手牌（东侧）：以右侧中点为旋转原点，逆时针旋转后调整垂直位置 */
.euchre-table .hand-3 {
    position: absolute;
    top: 50%;
    right: 10px;
    transform-origin: right center;
    transform: rotate(-90deg) translateY(100%);
}

.euchre-table .hand-4 {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

.euchre-table img {
    height: 100px;
    width: 70px;
}

原理说明 #

1. transform-origin：将旋转基点设置为手牌容器的左侧/右侧中点，旋转时元素会围绕这个点转动，避免整体偏移。
2. transform顺序：先执行旋转，再执行位移。旋转后坐标系改变，translateY的百分比基于旋转后的元素尺寸，能精准抵消旋转带来的位置偏差。
3. 自适应卡牌数量：因为容器是inline-block，卡牌数量变化时容器宽度会自动调整，配合基于百分比的位移，不会出现溢出或错位。

备选方案：双层容器分离定位与旋转 #

如果需要更灵活的布局控制，可使用双层容器：外层负责定位，内层负责旋转卡牌，彻底分离布局占位与视觉表现。

修改后的HTML（仅修改hand-1和hand-3） #

<div class="euchre-table">
    
    <img class="turn-up" src="resources/images/cards/9-C.png">
    
    <div class="hand hand-1">
        <div class="hand-inner">
            <img src="resources/images/cards/10-H.png">
            <img src="resources/images/cards/Q-H.png">
            <img src="resources/images/cards/K-H.png">
            <img src="resources/images/cards/A-H.png">
            <img src="resources/images/cards/J-H.png">
        </div>
    </div>
        
    <div class="hand hand-2">
        <img src="resources/images/cards/10-S.png">
        <img src="resources/images/cards/Q-S.png">
        <img src="resources/images/cards/K-S.png">
        <img src="resources/images/cards/A-S.png">
        <img src="resources/images/cards/J-S.png">
    </div>
        
    <div class="hand hand-3">
        <div class="hand-inner">
            <img src="resources/images/cards/10-D.png">
            <img src="resources/images/cards/Q-D.png">
            <img src="resources/images/cards/K-D.png">
            <img src="resources/images/cards/A-D.png">
            <img src="resources/images/cards/J-D.png">
        </div>
    </div>
        
    <div class="hand hand-4">
        <img src="resources/images/cards/10-C.png">
        <img src="resources/images/cards/Q-C.png">
        <img src="resources/images/cards/K-C.png">
        <img src="resources/images/cards/A-C.png">
        <img src="resources/images/cards/J-C.png">
    </div>
        
</div>

对应的CSS #

.euchre-table {
    position: relative;
    margin: 20px auto;
    width: 80%;
    height: 500px;
    border: 1px solid #000;
}

.euchre-table .turn-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.euchre-table .hand {
    position: absolute;
}

.euchre-table .hand-inner {
    display: inline-block;
}

.euchre-table .hand-1 {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
.euchre-table .hand-1 .hand-inner {
    transform: rotate(90deg);
    /* 旋转后将元素中心与外层容器中心对齐 */
    transform-origin: center center;
    transform: rotate(90deg) translate(-50%, -50%);
    margin-left: -175px; /* 原手牌宽度的一半（350px/2），抵消旋转后的偏移 */
}

.euchre-table .hand-2 {
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

.euchre-table .hand-3 {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.euchre-table .hand-3 .hand-inner {
    transform: rotate(-90deg) translate(-50%, -50%);
    margin-right: -175px;
}

.euchre-table .hand-4 {
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

.euchre-table img {
    height: 100px;
    width: 70px;
}

这种方案将定位与旋转逻辑分离，外层容器只负责垂直/水平居中，内层处理旋转和偏移，更适合复杂的动态场景。

内容的提问来源于stack exchange，提问作者Jurtle09