Question

我正在尝试创建一张翻转卡，前端类可以正常工作，但是我不知道为什么没有出现后端类，为什么要在卡上设置转换属性？!!!

HTML代码：-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flip Card</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="card">
        <div class="front">This is front</div>
        <div class="back">This is back</div>
    </div>
</body>
</html>

SASS代码：-

*
margin: 0
padding: 0
box-sizing: border-box

身体背景颜色：＃f1f2f3 透视：500px

.card
    width: 200px
    height: 300px
    border: 1px solid #666
    background-color: #eee
    border-radius: 5px
    position: relative
    margin: 50px auto
    overflow: hidden
    transition: all 1s ease-in-out
    transform-style: preserve-3d

    &:hover
        transform: rotateY(180deg)  

    div
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        padding: 25px 0
        text-align: center

    .front
        z-index: 2
        background-color: #fff
        color: #000
        backface-visibility: hidden

    .back
        z-index: 1
        background-color: #000
        color: #fff
        backface-visibility: hidden
        transform: rotateY(180deg)

翻转卡-我无法确定

0 个答案: