Question

我已经阅读了一些关于使用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元素提供固定的宽度和高度（或最小宽度和最小高度），它可以正常工作，但如果我没有，则不会出现鳍状肢。

我认为这是因为每个人都处于绝对的位置。所以我试着用：overflow：auto;在包含绝对定位元素的每个块上，但它没有帮助。然后我尝试删除所有宽度：100％;和身高：100％;并使用overflow：auto;但我得到了相同的结果。您是否知道.Flipper元素是否符合.Front和.Back元素的大小？

提前致谢。

CSS3具有可变大小内容的翻转效果

0 个答案: