May 6, 2015

Responsive 3d flip card

Responsive 3d flip card

This is to showcase your team-mates. On hover of the image the card flips 180deg on Y-axis and the back view is displayed. It is done using CSS3 animations and is also responsive.

Another design is show here.

HTML

<div class="container">
  <div class="cardWrapper">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 cardContainer">
        <div class="card">
          <div class="front">
            <img src="..." class="img-responsive" />
          </div>
          <div class="back">
            <div class="content">
              <h3 class="cardTitle">Richard Poluk</h3>
              <p>Web Developer</p>
              <p class="description"><i class="fa fa-quote-left fa-2x"></i> Something about me...</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 cardContainer">
        <div class="card">
          <div class="front">
            <img src="..." class="img-responsive" />  
          </div>
          <div class="back">
            <div class="content">
              <h3 class="cardTitle">Amanda Zush</h3>
              <p>UX/UI Designer</p>
              <p class="description"><i class="fa fa-quote-left fa-2x"></i> Something about me...</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 cardContainer">
        <div class="card">
          <div class="front">
            <img src="..." class="img-responsive" />  
          </div>
          <div class="back">
            <div class="content">
              <h3 class="cardTitle">Mark Antony</h3>
              <p>Android Developer</p>
              <p class="description"><i class="fa fa-quote-left fa-2x"></i> Something about me...</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 cardContainer">
        <div class="card">
          <div class="front">
            <img src="..." class="img-responsive" /> 
          </div>
          <div class="back">
            <div class="content">
              <h3 class="cardTitle">Frieda Pinto</h3>
              <p>IOS Developer</p>
              <p class="description"><i class="fa fa-quote-left fa-2x"></i> Something about me...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

CSS

body {
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4em;
  color: #333;
  text-align: center
}

.cardWrapper {
  margin-top: 50px
}

.animation {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.pageTitle sup {
  font-size: .6em;
  color: #333;
}

.content p {
  font-weight: 300;
}

.content p.description {
  font-weight: 300;
  font-size: 14px
}

.cardContainer {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  
  padding-left: 1%;
}

.secondRow {
  margin-top: -1.4%
}

.card {
  width: 250px;
  height: 300px;
  cursor: pointer;
  border: 8px solid #333;
  margin: 20px auto;
  
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card.flipped: {}

.card .front {
  background: #333
}

.card .front,
.card .back {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  color: white;
  text-align: center;
  font-size: 4em;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}

.card .back {
  width: 100%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 16px;
  text-align: left;
  line-height: 25px;
}

.card .back {
  background: #499a91;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

h3.cardTitle {
  line-height: 1.2em;
  margin-top: 8%;
  font-weight: 600;
}

.content h3.cardTitle {
  margin-top: 0%;
}

.content {
  padding: 4%;
  font-weight: 100;
  text-align: left;
  font-weight: bold;
}

jQuery

$('.card').hover(function() {
  $(this).toggleClass('flipped');
});

Attachments:

I have used external attachments.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css
//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700
demo

5 comments:

  1. Thanx for an awesome css tut/demo/resource! I'm definitely gonna use this in an upcoming project. One question though, what does row 78 in the css do? And what would be the best way to have the card flip back on tap on a smart-phone or tablet? As for now you'll have to tap another card to make the previously flipped card to "flip back"

    ReplyDelete
    Replies
    1. 1) You can ignore line num 78, it's invalid.
      2) To Flip the card back it is not necessary to tap on the card alone, try tapping out too it will work.

      Delete
    2. 2) What I meant was that I would like to have the card flip back when tapping it (so when tapping the same card making it flip back and forth). Is it possible to achieve this with css or does it require editing the javascript?

      Delete
    3. You can achieve this using jQuery. Try using .click(handler)
      Example:
      $('.card').click(function() {
      $(this).toggleClass('flipped');
      });

      Delete
  2. Thanks, that did the trick. Now I just have to figure out how to detect if it is a touch device or not. I want the hover function for non touch devices and the click function for touch devices. Any tips are welcome :)

    ReplyDelete

Popular Posts

Views