💻 + 📷 | CSS3 Animationen – Beispiel Bücherregal
8157
single,single-post,postid-8157,single-format-standard,ajax_fade,page_not_loaded,,,,wpb-js-composer js-comp-ver-3.6.12,vc_responsive
 

Blog

CSS3 Animationen – Beispiel Bücherregal

  |   webdesign experimentell   |   Kein Kommentar

Kein Flash – eine reine CSS3 Animation

 

Fahren Sie mal mit der Maus über die Bücher (OBACHT: ein aktueller FireFox oder Safari wird vorausgesetzt, damit der 3D-Effekt voll zum Tragen kommt):

Das Ganze ließe sich auch als 3D-Menü einsetzen.

Und so funktioniert es:

 


Der CSS Code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a { 
  outline: 0; 
}
a:active { 
  outline: none; 
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/***** END Reset **********/

body {

  background: #f1f1f1 url('../imgs/bg2.jpg');
  font-family: Arial, Verdana;

}

#wrapper {
  margin: 0px 0px 65px 25px;
  max-width: 960px;
}

.viewpoint {
  list-style: none;
  padding: 0;
}

/*************************************
      Build the book
**************************************/

.shape {
  width: 130px;
  height: 200px;
  margin: 30px;
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;

} 

.book {
  width: 130px;
  height: 200px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-65px);
  -moz-transform: translateZ(-65px);
  transform: translateZ(-65px);
  -webkit-transition: -webkit-transform 320ms;
  -moz-transition: -moz-transform 320ms;
  transition: transform 320ms;
  cursor: pointer;
}

/*************************
     Rotate shapes
**************************/

.book:hover {
  -webkit-transform: rotateY(-78deg) translateZ(20px);
  -moz-transform: rotateY(-78deg) translateZ(20px);
  transform: rotateY(-78deg) translateZ(20px);
}

/*************************************
Transform and style
**************************************/

.book .front, 
.book .info {
  position: absolute;
  width: 130px;
  height: 200px;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.book .front  {
  -webkit-transform: translateZ(65px);
  -moz-transform: translateZ(65px);
  transform: translateZ(65px);
  background-size: cover;
  background-repeat: no-repeat;
}

.book .info {
  -webkit-transform: rotateY(90deg) translateZ(65px);
  -moz-transform: rotateY(90deg) translateZ(65px);
  transform: rotateY(90deg) translateZ(65px);
  border: 1px solid #B8B5B5;
  font-size: 0.75em;
}

/*************************************
Shadow beneath the 3D shapes
**************************************/

.book::after {
  content: '';
  width: 130px;
  height: 130px;
  position: absolute;
  bottom: 0;
  box-shadow: 0 30px 50px rgba(0,0,0,0.9);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: rotateX(90deg) translateY(65px);
  -moz-transform: rotateX(90deg) translateY(65px);
  transform: rotateX(90deg) translateY(65px);
  -webkit-transition: box-shadow 350ms;
  -moz-transition: box-shadow 350ms;
  transition: box-shadow 350ms;
}

.book:hover::after {
  box-shadow: 50px -5px 50px rgba(0,0,0,0.4);
}

/*************************************
book information
**************************************/

.info header {
  color: #black;
  padding: 7px 10px;
  font-weight: bold;
  height: 65px;
  background-repeat: no-repeat;
  text-shadow: 0px 0px 0px rgba(0,0,0,2);
}

.info header h1 {
  margin: 10px 0 0 3px;
  font-size: 1.3em;
  color: #2765a4;

}

.info header .Year {
  border: 0px solid #000;
  padding: 1px 3px;

}

.info p {
  padding: 1.2em 1.4em;
  margin: 2px 0 0;
  font-weight: 700;
  color: #333;
  line-height: 1.4em;
  border-top: 10px solid #555;
}

/******************************************
Generate some "lighting" using box shadows
*******************************************/

.book .front {
  box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.book:hover .front {
  box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.book .info, 
.book .info header {
  box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);

}

.book:hover .info, 
.book:hover .info header {
  box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}

.book .front,
.book .info,
.book .info header {
  -webkit-transition: box-shadow 350ms;
  -moz-transition: box-shadow 350ms;
  transition: box-shadow 350ms;
}

/*************************************
fronts and still images
**************************************/

.shape:nth-child(1) .front {
  background-image: url('../imgs/book01.jpg');
}

.shape:nth-child(2) .front {
  background-image: url('../imgs/book02.jpg');
}

.shape:nth-child(3) .front {
  background-image: url('../imgs/book03.jpg');
}

.shape:nth-child(1) .info header {
  background-image: url('../imgs/innerImg01.jpg');

}

.shape:nth-child(2) .info header {
  background-image: url('../imgs/innerImg02.jpg');

}

.shape:nth-child(3) .info header {
  background-image: url('../imgs/innerImg03.jpg');

}

/*************************************
Media Queries
**************************************/
@media screen and (max-width: 480px){
  .shape {
    float: none;
    margin: 30px auto 60px;
  }
}

Der HTML Code:

  
  • ΕΞΟΔΟΣ

     fine escapes
    2014

    Sie können die Vorderseite als Plakat von mir beziehen

  • LÉON

     Son Chansons
    2014

    Sie können die Vorderseite als Plattencover von mir beziehen

  • SANTA FÉ

     David Koplin
    2014

    Sie können die Vorderseite als Buchcover von mir beziehen

 

Dieses Tutorial habe ich gefunden bei WebdesignerMagazin Ausgabe 221 Tutorial Files und für meine Bedürfnisse angepaßt. Übrigens: Ein sehr lohnenswertes Magazin und günstig im Abo.
Viel Spaß beim Nachbauen!

Gepostet am 18.04.2014

Keine Kommentare

Poste ein Kommentar