<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.flip-outer{ width: 300px; height: 300px}
.flip-inner {
width: 100%;
height: 100%;
position: relative;
transition: all 1s;
transform-style<strong>: preserve-3d !important;</strong>
}
.flip-inner:hover { transform: rotateY(180deg)}
.front{ width: 100%; position: absolute; backface-visibility: hidden}
.back{ width: 100%; text-align: center; position: absolute; transform: rotateY(180deg)}
</style>
<body>
<div class="flip-outer">
<div class="flip-inner">

<div class="back">
<p>Jason</p>
</div>
</div>
</div>
</body>
</html>
볼드체 부분이 아무리 적용을 시켜도 안되네요 무슨 문제일까요 ?