2

我已经阅读了一些关于使用 CSS3 属性在块元素上制作翻转效果的教程，并尝试重现它。

我的问题是，在这些教程中的每一个中，所有“脚蹼”都有固定的尺寸，我想根据它的内容使用可变尺寸。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        html * {
            margin: 0;
            padding: 0;
        }
        /*===============================================*/
        /* FLIPPER REQUIRED CSS                          */
        /*===============================================*/
        .Flipper
        {
            position: relative;
            /*overflow: auto;/**/

            -webkit-perspective: 600px;
               -moz-perspective: 600px;
                -ms-perspective: 600px;
                 -o-perspective: 600px;
                    perspective: 600px;
        }
        .Flipper > .Content
        {
            position: absolute;
            /*overflow: auto;/**/
            width: 100%;
            height: 100%;

            -webkit-transform: rotateX(0deg);
               -moz-transform: rotateX(0deg);
                -ms-transform: rotateX(0deg);
                 -o-transform: rotateX(0deg);
                    transform: rotateX(0deg);

            -webkit-transform-style: preserve-3d;
               -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                 -o-transform-style: preserve-3d;
                    transform-style: preserve-3d;

            -webkit-transition: all 1s ease-in-out;
               -moz-transition: all 1s ease-in-out;
                -ms-transition: all 1s ease-in-out;
                 -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
        }
        .Flipper:hover > .Content, .Flipper .Back
        {
            -webkit-transform: rotateX(180deg);
               -moz-transform: rotateX(180deg);
                -ms-transform: rotateX(180deg);
                 -o-transform: rotateX(180deg);
                    transform: rotateX(180deg);
        }
        .Flipper .Front, .Flipper .Back
        {
            position: absolute;
            width: 100%;
            height: 100%;
            /*overflow: auto;/**/

            -webkit-backface-visibility: hidden;
               -moz-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                 -o-backface-visibility: hidden;
                    backface-visibility: hidden;
        }
        /*===============================================*/
        /* FLIPPER CUSTOM CSS                            */
        /*===============================================*/   
        .Flipper
        {
            /*
            width: 400px;
            height: 400px;
            */
        }
        .Flipper {
            background: #00F;
        }
        .Flipper .Front {
            background: #0F0;
        }
        .Flipper .Back {
            background: #F00;
        }

        </style>
    </head>
    <body>
        <div class="Flipper">
            <div class="Content">
                <div class="Front">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="Back">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>
        </div>
    </body>
</html>

如果我为 .Flipper 元素提供固定的宽度和高度（或最小宽度和最小高度），它可以正常工作，但如果我不这样做，则不会出现脚蹼。

我想这是因为每个人都处于绝对的位置。所以我尝试使用：溢出：自动；在每个包含绝对定位元素的块上，但它没有帮助。然后我尝试删除所有宽度：100%; 和高度：100%；并使用溢出：自动；但我得到了同样的结果。你知道如何让 .Flipper 元素适合 .Front 和 .Back 元素内容的大小吗？

提前致谢。

4

0 回答 0