Question

我正在翻转卡片，可以显示一些获奖者的照片，当卡片被翻转时，会显示有关这些人的一些信息。我能够制作这些卡片甚至翻转它们。但问题是，在第二张卡片中，我们将悬停，卡片被翻转，信息显示在卡片下方而不是卡片上。此外，图像也被反转并显示，但是一旦卡被翻转就不应该显示图像。第一个工作正常。所以，如果有人能够指出问题，那将是很大的帮助。

这是我将鼠标悬停在第二张牌时的表现。

这是代码。

<html>
<head>
    <style>
        .winners_table{
                border: 2px solid red;
        }
        .winner_container {
                border: 2px solid blue;
                perspective: 1000px;
                display: inline-block;
                margin: 5px;
                width: 220px;
                height: 250px;
                z-index: 1;
                position: relative;
        }
        .winner{
                border: 2px solid black;
                transition: 0.6s;
                transform-style: preserve-3d;
                width: 100%;
                height: 100%;
        }
        .winner_container:hover .winner{
                transform: rotateY( 180deg );
                -webkit-transform: rotateY(180deg);
        }
        .winner img{
                border-radius: 300px;
                border: 1px solid white;
                margin: 0 auto;
                box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
                margin: 0 auto;
        }
        .winner h3{
                text-align: center;
        }
        /* hide back of pane during swap */
        .front, .back {
                position: absolute;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
        }
        /* back, initially hidden pane */
        .back {
                transform: rotateY(180deg);
                padding: 5px;
        }
    </style>
</head>

<body>
    <table>
    <tr class="winners_table">
        <td class="winner_container">
            <div class="winner">
                <div class="front">
                    <img src="facebook.png" alt="Winner" height="200" width="200">
                    <h3>Facebook</h3>
                </div>
                <div class="back">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue</p>
                </div>
            </div>
        </td>
        <td class="winner_container">
            <div class="winner">
                <div calss="front">
                    <img src="facebook.png" alt="Winner" height="200" width="200">
                    <h3>Facebook</h3>
                </div>
                <div class="back">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue </p>
                </div>
            </div>
        </td>
    </tr>
    </table>
</body>

如果你想看到github repo，那么it's here。

Answer 1

只是一个拼写错误。在你写的第二个div中

<div calss="front">

而不是

<div class="front">

工作demo。

使用CSS

1 个答案: