1. 홈
  2. 질의 응답
  3. CSS3 뒤집기 애니메이션

CSS3 뒤집기 애니메이션

2011-03-23 4 views
2

내가 작업해온 CSS3 플립 애니메이션에 문제가 있습니다. 내 웹 페이지에 미리보기 이미지가 있고, 페이지가로드되면 이미지가 뒤쪽의 설명을 나타 내기 위해 뒤집혀 야합니다. 그런 다음 클릭 할 때까지 일반 이미지처럼 보이게되고 다시 한 번 뒤집습니다.CSS3 뒤집기 애니메이션

문제는 설명 만 표시된다는 것입니다 (실제 애니메이션이 작동 함). 그러나 축소판 이미지는 표시되지 않습니다. 페이지가로드되고 설명이 뒤로 이동합니다 (원근감으로 인해).하지만 숨겨져 있어야합니다.

페이지 : http://amurisen.com/katherine/photography.php (그것은 단지 사파리와 크롬에서 작동합니다)

HTML

<div class="cssanimations"> 

<div id="s01" class="item"><div class="inner"> 
    <a href="#s01"><img src="photos/thumbs/thumb1.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s02" class="item"><div class="inner"> 
    <a href="#s02"><img src="photos/thumbs/thumb2.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s03" class="item"><div class="inner"> 
    <a href="#s03"><img src="photos/thumbs/thumb3.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s04" class="item"><div class="inner"> 
    <a href="#s04"><img src="photos/thumbs/thumb4.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 4</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s05" class="item"><div class="inner"> 
    <a href="#s05"><img src="photos/thumbs/thumb5.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 5</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s06" class="item"><div class="inner"> 
    <a href="#s06"><img src="photos/thumbs/thumb6.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 6</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s07" class="item"><div class="inner"> 
    <a href="#s07"><img src="photos/thumbs/thumb7.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 7</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s08" class="item"><div class="inner"> 
    <a href="#s08"><img src="photos/thumbs/thumb8.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 8</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s09" class="item"><div class="inner"> 
    <a href="#s09"><img src="photos/thumbs/thumb9.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 9</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

<div id="s10" class="item"><div class="inner"> 
    <a href="#s10"><img src="photos/thumbs/thumb10.jpg" /></a> 
     <div class="description"> <h3 class="fn">Photo 10</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div> 

</div>

CSS이 보는 많은 경우

@-webkit-keyframes bookflip { 
    0% { -webkit-transform : rotateY(0deg); } 
    50% { -webkit-transform : rotateY(180deg); } 
    100% { -webkit-transform : rotateY(0deg); } 
    } 

.cssanimations .item { 
    -webkit-perspective: 400; 
    float : left; 
    position : relative; 
    height : 150px; 
    width : 224px; 
    margin : 0 10px 10px 0;} 

.cssanimations .item .description { 
    font-size: 10px; 
    position : absolute; 
    width : 224px; 
    height : 150px; 
    padding : 3px; 
    background-color : rgb(0,0,0); 
    border : 3px solid rgb(0,0,0); 
    -webkit-transform : rotateY(180deg); 
    background-repeat : no-repeat; 
    background-position: 4px 18px; 
    background-size : 70px 47px;} 

.cssanimations .item .description h3:before { 
    content : url(images/idontevenknowanymore.png); 
    display : block; 
    float : left; 
    width : 70px; 
    height : 47px; 
    margin : 0 10px 5px 0; 
    border : 2px solid rgb(0,0,0);} 

.cssanimations .item img { 
    position : absolute; 
    border : 3px solid rgb(0,0,0); 
    -webkit-backface-visibility : hidden;} 

.cssanimations .item .inner { 
    -webkit-transform-style : preserve-3d; 
    -webkit-transition-property : transform; 
    -webkit-transition-duration : 1s; 
    -webkit-animation-name : bookflip; 
    -webkit-animation-duration : 2s; 
    -webkit-animation-iteration-count : 1; 
    -webkit-animation-timing-function : ease-in-out;} 

.cssanimations .item:target .inner { 
    -webkit-transform : rotateY(-180deg);} 

.cssanimations .item#s01 .description { 
    background-image : url(photos/smallthumbs/s01.jpg); } 

.cssanimations .item#s02 .description { 
    background-image : url(photos/smallthumbs/s02.jpg); } 

.cssanimations .item#s03 .description { 
    background-image : url(photos/smallthumbs/s03.jpg); } 

.cssanimations .item#s04 .description { 
    background-image : url(photos/smallthumbs/s04.jpg); } 

.cssanimations .item#s05 .description { 
    background-image : url(photos/smallthumbs/s05.jpg); } 

.cssanimations .item#s06 .description { 
    background-image : url(photos/smallthumbs/s06.jpg); } 

.cssanimations .item#s07 .description { 
    background-image : url(photos/smallthumbs/s07.jpg); } 

.cssanimations .item#s08 .description { 
    background-image : url(photos/smallthumbs/s08.jpg); } 

.cssanimations .item#s09 .description { 
    background-image : url(photos/smallthumbs/s09.jpg); } 

.cssanimations .item#s10 .description { 
    background-image : url(photos/smallthumbs/s10.jpg); } 

.cssanimations .item#s11 .description { 
    background-image : url(photos/smallthumbs/s11.jpg); } 


.cssanimations .item#s01 .inner { 
    -webkit-animation-delay : 1s;} 

.cssanimations .item#s02 .inner { 
    -webkit-animation-delay : 1.5s;} 

.cssanimations .item#s03 .inner { 
    -webkit-animation-delay : 2s;} 

.cssanimations .item#s04 .inner { 
    -webkit-animation-delay : 2.5s;} 

.cssanimations .item#s05 .inner { 
    -webkit-animation-delay : 3s;} 

.cssanimations .item#s06 .inner { 
    -webkit-animation-delay : 3.5s;} 

.cssanimations .item#s07 .inner { 
    -webkit-animation-delay : 4s;} 

.cssanimations .item#s08 .inner { 
    -webkit-animation-delay : 4.5s;}

죄송합니다 을 통하여. 감사합니다.

출처

2011-03-23 user673464

답변

2

키 프레임 대신 전환을 사용합니다. 내가 작성한이 튜토리얼을 보아라. http://css3.bradshawenterprises.com/#flip - 당신이하려고하는 것이 정확히 무엇인지 알 수있다 - 결국 누군가가 그것을 유용 할 것임을 알았다!

출처

2011-04-11 09:25:49

관련 문제

 관련 문제