CSS实现卡片翻转效果##CSS实现卡片翻转效果transform-style这一属性不能继承

##CSS实现卡片翻转效果transform-style这一属性不能继承

        .card{
            width: 200px;
            height: 200px;
            position: relative;
            margin: auto;
            transition: transform 3s;   
            transform-style: preserve-3d;        
        }
        .card-face{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .card-front{
            background: orange;
        }
        .card-back{
            background: palegreen;
            transform: rotateY(180deg);
        }
        .card:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-face card-front">正面</div>
        <div class="card-face card-back">反面</div>
    </div>```