Rotating Cards in CSS

      No Comments on Rotating Cards in CSS

Rotating Cards in CSS:


Rotating Cards in CSSScanfcode
Code wants to be simple


About Me

Scanfcode helps you build great codes in HTML, CSS, C, C++, JavaScript, PHP, Android & much more.



Rotating Cards in CSS

HTML:

<div class="col-md-12">
    <div class="well col-md-5 card-scanfcode">
          <div class="well col-md-12 card">
              <div class="front">
                 <div class="front-body">
                <img src="cropped-scanfcode1.png" alt="Rotating Cards in CSS" width="80" height="80"/>
                     <span class="heading">Scanfcode</span>
                     <span>Code wants to be simple</span>
                  </div>
                 <div class="front-footer">
                   <span>Rotate Me</span>
                 </div>
              </div>
              <div class="back">
                 <hr>
                 <div class="back-body">
                    <span class="heading">About Me</span>
                    <p>
                    Scanfcode helps you build great codes in HTML, CSS, C, C++, JavaScript, PHP, Android & much more.
                    </p>
                  </div>
                  <hr/>
              </div>
          </div>
   </div>
</div>

CSS

.card-scanfcode {
-webkit-perspective:800px;
   -moz-perspective:800px;
     -o-perspective: 800px;
        perspective: 800px;
        margin:0px;
        padding:0px;
        height:250px;
        text-align:center;
	font-family: 'Arima Madurai', cursive;
}
/* flip the pane when hovered */
.card-scanfcode:hover .card{
	-webkit-transform: rotateY( 180deg );
           -moz-transform: rotateY( 180deg );
             -o-transform: rotateY( 180deg );
                transform: rotateY( 180deg );
}

.card-scanfcode.static:hover .card,
.card-scanfcode.static.hover .card {
	-webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
    transform: none;
}
/* flip speed  */
.card {
    -webkit-transition: -webkit-transform .5s;
          -moz-transition: -moz-transform .5s;
              -o-transition: -o-transform .5s;
                    transition: transform .5s;
         -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
              -o-transform-style: preserve-3d;
                 transform-style: preserve-3d;
	                   position: relative;
                        background-color:#fff;
                                 height:250px;
}
/*  front view */
.front
{
   position:absolute;
   top:0;
   left:0;
   height:100%;
   width:100%;
   display:block;
   padding:1%;
}
/* back */
.back
{
   position:absolute;
   padding:1%;
   top:0;
   left:0;
   height:100%;
   width:100%;
   display:none;
   -webkit-transform: rotateY( 180deg );
      -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
           transform: rotateY( 180deg );
}
/* displaying the back */
.card-scanfcode:hover .back
{  
    display:block;
}
.card-scanfcode:hover .front
{  
    display:none;
}
.front-body
{
   height:210px;
}
.front-footer
{
    border-top:solid 1px #666;
}
/* styling the inner elements */
.card-scanfcode span
{
   color:#666;
}
.card-scanfcode img
{
  box-shadow:0px 1px 4px 0px #ccc; 
  border-radius:100%;
  padding:2%;
  margin-top:4%;
}
.card-scanfcode .heading
{
    font-family: 'Arima Madurai', cursive;
    color:#333;
    font-size:25px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *