ie11, 엣지에서 문제입니다.

해결됨
도움 프로필

perspactive가 적용된 상태에서 회전을 시키면 backface-visibility가 ie11에서는 꼭 transition이 없는 상태처럼 적용이 됩니다. 엣지에서는 앞면 카드가 90퍼센트 정도 회전을 하고 정지하고 사라지지않고 남아있습니다. 소스를 선생님과 똑같이 적어도 그런데 어떤게 문제일까요... perspactive를 제거하면 3d 효과는 사라지나 위에 문제들이 발생하지 않습니다. 크롬에서는 잘 동작합니다.

도움 프로필
도움 2019.09.27

엣지에서 증상입니다.

엣지에서 발생한 문제입니다.

1분코딩 프로필
1분코딩 2019.10.01

강의 후반부에, ie에서 transform-style: preserve-3d;가 지원되지 않는 문제 때문에 html 구조도 바꾸고 CSS도 변경하는 부분이 나옵니다. 아래 소스코드로 한번 해보시기 바랍니다 :)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Interactive Web</title>

    <style>

        .world {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 80vw;

            height: 80vh;

            background: #fff000;

            perspective: 500px;

        }

        .card {

            position: relative;

            width: 100px;

            height: 150px;

            margin: 1em;

            transform: rotateY(0deg);

            transition: 1s;

            transform-style: preserve-3d;

        }

        .card-side {

            display: flex;

            align-items: center;

            justify-content: center;

            position: absolute;

            left: 50%;

            top: 50%;

            width: 100px;

            height: 150px;

            margin: -75px 0 0 -50px;

            border-radius: 0.5em;

            font-size: 1.5rem;

            -webkit-backface-visibility: hidden;

            backface-visibility: hidden;

            transition: 1s;

        }

        .card-side-front {

            z-index: 1;

            background: white;

        }

        .card-side-back {

            background: red;

            transform: rotateY(180deg);

        }

        .world:hover .card-side-front {

            transform: rotateY(180deg);

        }

        .world:hover .card-side-back {

            transform: rotateY(360deg);

        }

    </style>

</head>

<body>

    <div class="world">

        <div class="card-side card-side-front">F</div>

        <div class="card-side card-side-back">B</div>

    </div>

</body>

</html>

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스