9ineBB

WEB×DESIGN×CREATIVE

CSSのみで作られた3Dに回転するかっこいいフリップギャラリー

このエントリーをはてなブックマークに追加
239 follow us in feedly
PR

マウスオーバーすると3Dに回転するかっこいいギャラリースタイル

イメージをhoverすると、3Dに回転する。CSSで作られておりスクリプトは使われていません。マウスオーバーすると、イメージが回転して裏側の画像が表示されるようになっています。画像はdiv要素のfront、backとクラス名が付いたものにCCS側でbackgroundで指定しています・

  • .fl-1 .front {}
  • .fl-1 .back {}

このような感じに背景で画像が指定されています。個数を増やすには、fl-x のところが変化するようにHTMLを追加して、それに対応したCSSを加えればOKです。CSSの追加は、インラインでHTMLタグに直接書き込んでしまった方が管理がしやすいかもしれません

DEMO 表示

 

 

 

code

HTML

<div class="flip-container fl-1 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-2 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-3 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-4 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-5 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-6 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-7 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="flip-container fl-8 vertical">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
<div class="clear clearfix"></div>
<br />
<a href="http://codepen.io/igcorreia/pen/vEzmyV" target="_blank" class="waves-effect waves-light btn-large green darken-4">VIEW ALSO PARTICLE BUTTON & GLOW EFFECT
</a>

 

CSS

html,body{margin: 0;padding: 0;width: 1280px;height: 760px;background: #000;overflow: hidden;}
/* entire container, keeps perspective */
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  width: 25%;
  float:left;
}

.flip-container:hover,
.flip-container.hover{
  z-index:2;
  /*-webkit-box-shadow: 0 0 30px #111;*/
  /*box-shadow: 0 0 30px #111;*/
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back ,
  .flip-container.hover .back {
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    .flip-container:hover .front ,
  .flip-container.hover .front {
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 360px;
}

/* flip speed goes here */
.flipper {

  -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
  -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
          transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    position: relative;


}

/* hide back of pane during swap */
.front, .back {

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
  -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
          transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

/*
    Some vertical flip updates
*/
.vertical.flip-container {
    position: relative;
}

    .vertical .back {
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    }

    .vertical.flip-container:hover .back ,
  .vertical.flip-container.hover .back {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    }

    .vertical.flip-container:hover .front ,
  .vertical.flip-container.hover .front {
        -webkit-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);

    }

  .front {background: #151515;}
  .back {background: #191919;}

  .fl-1 .front{background: url('https://unsplash.it/320/370?image=167');}
  .fl-1 .back {background: url('https://unsplash.it/320/370?image=168');}

  .fl-2 .front{background: url('https://unsplash.it/320/370?image=169');}
  .fl-2 .back {background: url('https://unsplash.it/320/370?image=165');}

  .fl-3 .front{background: url('https://unsplash.it/320/370?image=164');}
  .fl-3 .back {background: url('https://unsplash.it/320/370?image=163');}

  .fl-4 .front{background: url('https://unsplash.it/320/370?image=162');}
  .fl-4 .back {background: url('https://unsplash.it/320/370?image=161');}

  .fl-5 .front{background: url('https://unsplash.it/320/370?image=160');}
  .fl-5 .back {background: url('https://unsplash.it/320/370?image=189');}

  .fl-6 .front{background: url('https://unsplash.it/320/370?image=188');}
  .fl-6 .back {background: url('https://unsplash.it/320/370?image=176');}

  .fl-7 .front{background: url('https://unsplash.it/320/370?image=187');}
  .fl-7 .back {background: url('https://unsplash.it/320/370?image=186');}

  .fl-8 .front{background: url('https://unsplash.it/320/370?image=184');}
  .fl-8 .back {background: url('https://unsplash.it/320/370?image=182');}

.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
z-index: 1;
will-change: opacity,transform;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
text-align:center;
}

.clear{float:none;clear:both;}

 

PR
follow us in feedly
短縮URL:
2015年04月15日 WEB制作系 コード・プラグイン CodePenCSS

オススメ記事

HTMLのinput rangeのスライダーで数値をjQueryでリアルタイムに取得する jQuery UI sortable を使ってD&Dでリストの並び替えを実装する。 jQueryで追加した要素に対してクリックイベントが有効な書き方 javascript 配列を for in を使ってキーと値を取り出すループ jQueryでキーボードの入力と合わせて入力されたキーを取得するあれこれ layzr.js を使って iframe を遅延読み込みする javascriptで対象タグを選択状態にする javascriptでクリップボードへ直接コピーさせる document.execCommand(‘copy’) 広告が非常にされている時に当たり障りのないようにブロックする表示を作ってみた jQueryで自動で見出しリストとアンカーリンクを作る QRコードを自動で生成するjQueryプラグイン「jquery.qrcode.js」の使い方 javascript で奇数、偶数、倍数で条件分岐する方法 jQuery 3.0 での.load .unload .errer の廃止での代用する方法 ページを開いた時に画像をフェードイン・フェードアウトするプラグイン jQueryを使ってサイトに表示するメールアドレスを収集BOTから簡易的に守る ページを開いた時に画像をフェードイン、フェードアウトで表示してから コンテンツを表示させる jQuery（javascript）を使っている時にエラーや結果を出力してチェックする方法 PHP+wkhtmltoimage でウェブサイトのスクリーンショット・サムネイルを作成する PHPからmb_send_mail()でメールを送信する 郵便番号を入力すると住所をリアルタイムで補完してくれるjQueryプラグイン「jquery.jpostal.js」

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー