CODEWITHSUNDEEP
htmlcss
user2271471
user2271471

Reputation:

Flipping Card Issue

I am trying to create a flipping card metro style menu, however when I tried to declare the front and back styles when you are hovering your mouse on the front div it does not look good when it shows the back div.

Here's the CSS code: 

ul{ 
    -webkit-perspective: 1000; 
    width: 50%; 
    margin: 120px auto;
}
li{ 
    width: 200px; 
    height: 200px; 
    margin-right: 10px; 
    margin-bottom: 10px;  
    float: left; 
    list-style: none;  
    position: relative;
    cursor: pointer; 
    font-family: 'Open Sans'; 
    font-weight: 300;  
    background: #34495e;
}
div{ 
    color: yellow; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: all 0.5s ease; 
    -webkit-backface-visibility: hidden;
}
.front{
    z-index: 3;
    color: #fff;
    text-align: center;
    line-height: 210px;
    font-size: 20px;
    background: #e3e3e3;
}
.front:hover {
    z-index: 0;
    -webkit-transform: rotateY(180deg);
}
.back:hover {
    -webkit-transform: rotateY(0deg);
}
.back{
    color: #fff;
    text-align: center;
    line-height: 200px;
    font-size: 22px;
}
#box1{ background: #1abc9c;}
#box2{ background: #2ecc71;}
#box3{ background: #3498db;}
#box4{ background: #f1c40f;}
#box5{ background: #e67e22;}
#box6{ background: #e74c3c;}

I am just wondering if there is a fix that we can do to make it look like the back is a part of the card cause right now it seems that it was a static face and won't move and I am just flipping front one to show the other static.

Check out the JSFiddle: http://jsfiddle.net/p6NQ2/2/

Upvotes: 0

Views: 1061

Answers (2)

Harry
Harry

Reputation: 89750

Method explanation: Initially the back face is rotated by 180 deg and when the li is hovered on, its child div.back) is rotated back into view (0 deg) while the div.front is rotated by 180 deg and thus gives it a front and back flipping effect.

You can achieve the card flip effect by doing the following changes to your CSS.

.back{
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 22px;
  -webkit-transform: rotateY(180deg); /* initially it would be rotated by 180 deg */
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);    
  background: #34495e; /* moved the background color from the li to the back element */
}

li:hover > .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);    
}
li:hover > .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);    
  transform: rotateY(0deg);
}

Tested in Internet Explorer 10 & 11, Chrome v24, Firefox v19 and Safari v5.1.7 (on Windows).

Notes:

  1. Set the -webkit-perspective: 1000; (and other browser prefixed versions) on the li rather than on the ul. When the perspective is set on the ul, it is common for all child elements of the ul and the perspective is from the view point of the parent ul. When it is applied on the li it is from the view point of each individual li and hence produces the same effect on each li. Refer to this thread for more details on the difference.
  2. We are adding the flip effect on the hover of the container li instead of the .front element because since the .front element is also being rotated, it would cause a very jittery effect.

Demo with hover on LI

body {
  background: #ecf0f1;
}
ul {
  width: 50%;
  margin: 120px auto;
}
li {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  list-style: none;
  position: relative;
  cursor: pointer;
  font-family: 'Open Sans';
  font-weight: 300;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
}
div {
  color: yellow;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {
  z-index: 3;
  color: #fff;
  text-align: center;
  line-height: 210px;
  font-size: 20px;
  background: #e3e3e3;
}
li:hover > .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
li:hover > .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.back {
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 22px;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #34495e;
}
#box1 {
  background: #1abc9c;
}
#box2 {
  background: #2ecc71;
}
#box3 {
  background: #3498db;
}
#box4 {
  background: #f1c40f;
}
#box5 {
  background: #e67e22;
}
#box6 {
  background: #e74c3c;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li>
    <div class="front" id="box1"><i class="fa fa-home fa-2x"> </i> 
    </div>
    <div class="back">Home</div>
  </li>
  <li>
    <div class="front" id="box2"><i class="fa fa-user fa-2x"></i>
    </div>
    <div class="back">About</div>
  </li>
  <li>
    <div class="front" id="box3"><i class="fa fa-briefcase fa-2x"></i>
    </div>
    <div class="back">Portfolio</div>
  </li>
  <li>
    <div class="front" id="box4"><i class="fa fa-desktop fa-2x"></i>
    </div>
    <div class="back">Services</div>
  </li>
  <li>
    <div class="front" id="box5"><i class="fa fa-cubes fa-2x"></i>
    </div>
    <div class="back">Products</div>
  </li>
  <li>
    <div class="front" id="box6"><i class="fa fa-envelope fa-2x"></i>
    </div>
    <div class="back">Contact</div>
  </li>
</ul>

Jittery demo with hover on front div

body {
    background: #ecf0f1;
}
ul {
    width: 50%;
    margin: 120px auto;
}
li {
    width: 200px;
    height: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    list-style: none;
    position: relative;
    cursor: pointer;
    font-family:'Open Sans';
    font-weight: 300;
    -webkit-perspective: 1000;
}
div {
    color: yellow;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all 0.5s ease;
    -webkit-backface-visibility: hidden;
}
.front {
    z-index: 3;
    color: #fff;
    text-align: center;
    line-height: 210px;
    font-size: 20px;
    background: #e3e3e3;
}
.front:hover {
    z-index: 0;
    -webkit-transform: rotateY(180deg);
}
.front:hover + .back {
    -webkit-transform: rotateY(0deg);
}
.back {
    color: #fff;
    text-align: center;
    line-height: 200px;
    font-size: 22px;
    -webkit-transform: rotateY(180deg);
    background: #34495e;
}
#box1 {
    background: #1abc9c;
}
#box2 {
    background: #2ecc71;
}
#box3 {
    background: #3498db;
}
#box4 {
    background: #f1c40f;
}
#box5 {
    background: #e67e22;
}
#box6 {
    background: #e74c3c;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
    <li>
        <div class="front" id="box1"><i class="fa fa-home fa-2x"> </i> 
        </div>
        <div class="back">Home</div>
    </li>
    <li>
        <div class="front" id="box2"><i class="fa fa-user fa-2x"></i>
        </div>
        <div class="back">About</div>
    </li>
    <li>
        <div class="front" id="box3"><i class="fa fa-briefcase fa-2x"></i>
        </div>
        <div class="back">Portfolio</div>
    </li>
    <li>
        <div class="front" id="box4"><i class="fa fa-desktop fa-2x"></i>
        </div>
        <div class="back">Services</div>
    </li>
    <li>
        <div class="front" id="box5"><i class="fa fa-cubes fa-2x"></i>
        </div>
        <div class="back">Products</div>
    </li>
    <li>
        <div class="front" id="box6"><i class="fa fa-envelope fa-2x"></i>
        </div>
        <div class="back">Contact</div>
    </li>
</ul>

Upvotes: 5

Linial
Linial

Reputation: 1154

Maybe something like this:

CSS Flip: DEMO

I added two new classes: Flipper , Flip Container.

.flip-container {
    perspective: 1000;
}
    /* flip when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

Additional Info:

I've embedded Aerotwist's | Paul Lewis's Graphical CSS FLIP including jQuery. It's really cool and you might find it more helpful:

there is a CSS code inside, which divides to two parts, first, is the "Movement" of the "Card", the second is the main style.css. I'd suggest you separate one from another.

CSS: 3D Flip: JSFIDDLE

Good Luck!

Upvotes: 2

Related Questions