翻转卡-我无法确定

时间:2019-10-03 07:39:11

标签: html css sass frontend

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

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 个答案:

没有答案
豫ICP备18024241号-1