【CSS3】Transition & Transforms 写真ギャラリーデモ

ギャラリーデモ

by tea4two

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<header>Photo Gallery</header>
<div id="photo">
    <div id="child" class="animated"></div>
</div>
<p id="btn"><a href="#">Next Image</a>
</p>

CSS

header {
    background: #755;
    padding: 8px 0;
    text-align: center;
    color: #fff;
    font-family: Georgia, Times, serif;
    font-size: 120%;
}
/* アニメーション設定 */
@-webit-keyframes anim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes anim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#photo {
    width: 200px;
    height: 200px;
    margin: 30px auto;
    /*position: relative;*/
    /* 3Dtransformation */
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
#photo > div {
    display: block;
    height: 200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background: #000;
}
#photo > div img {
    vertical-align: bottom;
}

/* アニメーションをさせる要素
    JSにて .animated を LI に付ける。
*/
#child {
    -webkit-animation: anim 5s infinite alternate;
    animation: anim 5s infinite alternate;
}
/* ボタン */
 #btn a {
    display: block;
    width: 200px;
    margin: 0;
    text-align: center;
    padding: 5px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: orange;
    text-decoration: none;
    color: #fff;
}
#btn a:hover {
    background: brown;
}