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

关于子元素，只需将样式更改为

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

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

关于家长，这有点困难。不要设置变换原点，而是将元素移动到旋转中心，旋转它，然后将其移回原始位置。所有这些都可以相对于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);
}

＆＃13;

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

＆＃13;

 <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>

＆＃13;

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

1 个答案: