根据元素的可变高度设置 translateZ 值

Question

我使用 3D css 变换创建了旋转立方体效果。为了实现这一点，我对子元素进行了此转换：

transform:  translateY(-50%) translateZ(-75px) rotateX(90deg) ;

父元素上的这个：

transform-origin: center center -75px;

完整代码在这里：https://codepen.io/willdelphia/pen/JZOpMJ

如您所见，我在两个地方使用了常量“-75px”。这是因为父元素的高度是 150px。我正在寻找一种方法（最好是通过 CSS）来实现相同的效果，但使用任意高度的元素。

所以基本上我想要的是计算任何给定元素高度的一半，然后在我有 75px 的地方使用该值。

这在 CSS 中可行吗？我需要依赖 javascript 吗？是否有另一种方法可以实现可以采用任意大小的元素的相同效果？

Answer 1

关于child元素，把样式改成这样就可以了

transform-origin: center bottom;
transform: translateY(-100%) rotateX(90deg);

更改变换原点，现在所有移动都在 Y 轴上完成，而不是 Y 轴上的 50%% 和 Z 轴上的 50%。

关于parent，有点难。不是设置变换原点，而是将元素移动到旋转中心，旋转它，然后将其移回原始位置。所有这些都可以相对于 Y 完成（注意只有中心旋转发生变化）：

.flipper {
    transform: rotateX(90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(-90deg);

}

.item:hover .flipper {
    transform: rotateX(90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(-90deg);
}

html, body {
    margin: 10px 0 0 0;
    background: rgb(40, 40, 40);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 700px;
    margin: auto;
}

.item {
    width: 150px;
    height: 150px;
    margin: 10px;
    perspective: 400px;

}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    transform: rotateX(90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(-90deg);

}

.item:hover .flipper {
    position: relative;
    transform: rotateX(90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(-90deg);
}

.cubefront{
    z-index: 2;
    width: 100%;
    height: 100%;
}

.cubetop{
    z-index: 0;

    transform-origin: center bottom;
    transform: translateY(-100%) rotateX(90deg) ;
    
    width: 100%;
    height: 100%;
    color: white;
    background: rgb(62, 62, 62);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cubefront, .cubetop {
    /* backface-visibility: hidden; */
 position: absolute;
 top: 0;
    left: 0;
    
}

#item1 .cubefront {
    background: rgb(179, 45, 45);
}


#item2 .cubefront {
    background: rgb(179, 103, 45);

}

#item3 .cubefront {
    background: rgb(179, 148, 45);
}

#item4 .cubefront {
    background: rgb(157, 179, 45);
}

#item5 .cubefront {
    background: rgb(74, 179, 45);
}

#item6 .cubefront {
    background: rgb(45, 179, 132);
}

#item7 .cubefront {
    background: rgb(45, 159, 179);
}

#item8 .cubefront {
    background: rgb(45, 99, 179);
}
#item9 .cubefront {
    background: rgb(45, 49, 179);
}
#item10 .cubefront {
    background: rgb(87, 36, 170);
}
#item11 .cubefront {
    background: rgb(137, 36, 170);
}
#item12 .cubefront {
    background: rgb(170, 36, 143);
}
#item13 .cubefront {
    background: rgb(170, 36, 103);
}
#item14 .cubefront {
    background: rgb(170, 36, 36);
}

 <div class="flex">
        <div id="item1" class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item2"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item3"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item4"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item5"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
         <div id="item6"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
         <div id="item7"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
         <div id="item8"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
         <div id="item9"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item10"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item11"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item12"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item13"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
        <div id="item14"  class="item">
            <div class="flipper">
                <div class="cubefront"></div>
                <div class="cubetop">
                    <div class="text">
                        Text
                    </div>
                </div>
            </div>
        </div>
    </div>

根据元素的可变高度设置 translateZ 值

set translateZ value based on variable height of element

css

css-transforms