CSS 애니메이션을 사용하여 서적 효과 팝업

그래서 팝업으로 책 효과를 만들고 싶지만 2D로만 만들고 싶습니다. (beercamp 페이지와 같지 않음).CSS 애니메이션을 사용하여 서적 효과 팝업

이상적인 결과 : IMG의

바닥
IMG가 팝업되고 그 다음 눈에 보이지 않는 시작 같은 위치에 유지 (이 수직이 될 때까지 다음, 그 뒷면에 누워 상상 위로 들어 올리는)
항목은 내가 CSS 애니메이션으로 읽었습니다 (가능한 경우)

압축도 나타나지 않아야합니다, 내가 찾을 수있는 가장 가까운 애니메이션

입니다

transform: rotateX(xdeg);

0 그래서 나는 그것을 테스트하기 위해 제작 :

<!doctype html> 

<style type="text/css"> 

#popup 
{ 
    transform: rotateX(90deg); 
    animation-delay: 2s; 
    animation-duration: 3s; 
    animation-name: popupanim; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

@keyframes popupanim 
{ 
    from { 
     transform: rotateX(90deg); 
    } 

    to { 
     transform: rotateX(0deg); 
    } 
} 
</style> 

<body> 
    <img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/> 
</body>

이의 문제는 아래 이미지 변경 수준 및 이미지가 분명히 압축되어 있다는 점이다. 내 요구를 충족시키기 위해 어떻게 개선 할 수 있습니까?

출처

2013-05-17 louisdeb

컨테이너 요소를 추가하고 제대로 돌리 만들기 위해 transform-origin 속성을 사용하여 (또한 (xdeg, ydeg, zdeg가), 출력을 생성하지 않는 이유 측면 ROTATE3D하지?) :

#container { 
    display: inline-block; 

    perspective: 600px; /* Tweak this */ 
} 

#popup { 
    transform: rotateX(90deg); 
    transform-origin: bottom; 
}

데모 : http://jsfiddle.net/BEy9f/3/

당신은 제대로 관점의 작업을하기 위해 부모 요소 (#container)를 사용합니다. 또한 #popup이 요소의 정확한 중심에 있지 않으면 (왜 내가 display: inline-block을 그 안에 넣었습니까?), 애니메이션에서 벗어난 것처럼 보일 것입니다.

크롬도 3D 변환을 지원하므로 -webkit- 접두사를 사용하여 지원을 추가 할 수 있습니다.

출처

2013-05-17 21:04:36 Blender

거의 완벽하게 작동했습니다. 나는 원근감을 가질 필요가 있습니까? 처음에는 평면 개체를 사용하기 위해 퍼스펙티브 (perspective : 0px;)를 제거합니다. – louisdeb

아, 변환을 -webkit-transform으로 바꾸면 다른 브라우저에서 함수의 원래 'transform :'을 포함해야합니까, 아니면 완전히 '-webkit-transform :'으로 바꿀 수 있습니까? – louisdeb

@louisdeb : 예 ,'-webkit-'속성은 Webkit 브라우저에서만 작동합니다. – Blender

CSS 애니메이션을 사용하여 서적 효과 팝업

답변

관련 문제