ie11, 엣지에서 문제입니다.
perspactive가 적용된 상태에서 회전을 시키면 backface-visibility가 ie11에서는 꼭 transition이 없는 상태처럼 적용이 됩니다. 엣지에서는 앞면 카드가 90퍼센트 정도 회전을 하고 정지하고 사라지지않고 남아있습니다. 소스를 선생님과 똑같이 적어도 그런데 어떤게 문제일까요... perspactive를 제거하면 3d 효과는 사라지나 위에 문제들이 발생하지 않습니다. 크롬에서는 잘 동작합니다.
답변 2
3
강의 후반부에, 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>
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
102
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
127
1
animation이벤트 질문이요!
0
72
1
resize handler에서 질문이 있습니다.
0
111
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
218
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
149
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
266
1
rotateY()에서 deg에 따른 차이
0
197
1
코드 작성 순서
0
276
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
394
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
265
2
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
326
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
361
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
305
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
306
2