CODEWITHSUNDEEP
jquerycsscss-animations
Krish
Krish

Reputation: 1894

Css3 Perspective 3d Animation

How can create a pure css3 3d perspective flip animation after mouse hover....

enter image description here

Example : http://themeforest.net/item/decadence-minimal-html5-light-mobile-version/full_screen_preview/2036310

Is it have Jquery code also ?....please clear me and how can create it by Css3 or Jquery....

Upvotes: 0

Views: 2439

Answers (2)

Surjith S M
Surjith S M

Reputation: 6740

It's a CSS only plugin named 3drollovers.css

Demo and Source Code

See Flipbox demo, Its matching the given site.

CSS

.rollover {
    position: relative;
    width: 265px;
    height:265px;
    display: block;
    float:left;
}
.short{
    width:100px;
    height:100px;
}
.front {
    z-index: 2;
    position: absolute;
    background: #fff;
}
.back {
    z-index: 1;
    position: absolute;
}
.rollover:hover .back, 
.rollover:focus .back {
    z-index: 2;
}
.rollover:hover .front, 
.rollover:focus .front {
    z-index: 1;
}
.fade .rollover .front {
    opacity: 1;
    -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover .back {
    opacity: 0;
    -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover:hover .front, 
.fade .rollover:focus .front {
    opacity: 0;
}
.fade .rollover:hover .back, 
.fade .rollover:focus .back {
    opacity: 1;
}
.flip .rollover {
    -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
.flip .cube {
    height: 265px;
    width: 265px;
    -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
     -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
      -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
       -o-transform: rotateX(0) rotateY(0) rotateZ(0);
          transform: rotateX(0) rotateY(0) rotateZ(0);
    -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.flip .front {
    -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.flip .back {
    -webkit-transform: rotateY(180deg) translate3d(0,0,0);
     -moz-transform: rotateY(180deg) translate3d(0,0,0);
      -ms-transform: rotateY(180deg) translate3d(0,0,0);
       -o-transform: rotateY(180deg) translate3d(0,0,0);
          transform: rotateY(180deg) translate3d(0,0,0);
}
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {
    -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg); 
      -ms-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.box .front {
    -webkit-transform: translate3d(0,0,80px) scale(0.9,0.9);
     -moz-transform: translate3d(0,0,80px) scale(0.85,0.85);
      -ms-transform: translate3d(0,0,80px) scale(0.85,0.85);
       -o-transform: translate3d(0,0,80px) scale(0.85,0.85);
          transform: translate3d(0,0,80px) scale(0.85,0.85);
}
.box .back {
    -webkit-transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.9,0.9);
     -moz-transform: rotateY(180deg) translate3d(0,0,80px) scale(0.85,0.85);
      -ms-transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.85,0.85);
       -o-transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.85,0.85);
          transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.85,0.85);
}

Upvotes: 2

Jonas Grumann
Jonas Grumann

Reputation: 10786

Something like http://jsfiddle.net/aHUuw/ It can be done with only css, you'll need to tweak it to your needs. These are the most important parts:

.container {
    perspective: 500px;
}

.container:hover .flipper {
    transform-origin: top left;
    transform: rotateY(60deg);
    transition: transform 250ms ease;
}

Upvotes: 1

Related Questions