CSS3 Flip Анимации - PullRequest
       2

CSS3 Flip Анимации

2 голосов
/ 23 марта 2011

У меня проблемы с флип-анимацией CSS3, над которой я работал. У меня есть миниатюрные изображения на моей веб-странице, и когда страница загружается, изображения должны перевернуться, чтобы показать описание на обороте. Затем они должны выглядеть как обычные изображения до тех пор, пока на них не нажмут, и тогда они снова перевернутся.

Проблема в том, что отображаются только описания (работает фактическая анимация), но не миниатюрные изображения. Страница загружается и описания возвращаются назад (из-за перспективы), но они должны быть скрыты.

Страница: http://amurisen.com/katherine/photography.php (Должно работать только в Safari и Chrome)

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;}

Извините, если это много для просмотра. Спасибо!

1 Ответ

2 голосов
/ 11 апреля 2011

Вместо ключевых кадров я бы использовал переходы.Взгляните на учебник по этому поводу, который я написал: http://css3.bradshawenterprises.com/#flip - похоже, именно то, что вы пытаетесь сделать - знал, что кто-то найдет его полезным в конечном итоге!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...