Top
Home
#skew {
transform:skew(35deg);
}
#scale {
transform:scale(1,0.5);
}
#rotate {
transform:rotate(45deg);
}
#translate {
transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}
#transDemo4:hover #rotateX {
transform:rotateX(180deg);
}
#transDemo4:hover #rotateY {
transform:rotateY(180deg);
}
#transDemo4:hover #rotateZ {
transform:rotateZ(180deg);
}

$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});



-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

$('.movable').click(function() {
   $(this).css('left','200px');
});

http://desandro.github.io/3dtransforms/
darielnoel'S @keyframes
daneden'S @keyframes
kirupa 'S tutorial
Rocket @keyframes


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

.play{
border:1px solid red;
animation-name:pic;
animation-play-state: running ;
}

<script>
$(document).ready(function(){
  $(".pic").mouseover(function(){
      $(".pic").addClass("play");
  });
     $(".pic").mouseout(function(){
      $(".pic").removeClass("play");
  });
});
</script>





<style>

/* -------------------- BEGIN -------------------- */

.{

-webkit-animation-name:;
-moz-animation-name:;
-o-animation-name:;
animation-name:;
opacity:0;
position:absolute;
z-index:0;

}

@-webkit-keyframes { // -webkit-transform
% {-webkit-transform: translateX(px) translateY(px);opacity:1.0;}
}
@-moz-keyframes {//-moz-transform
% {-moz-transform: translateX(px) translateY(px);opacity:1.0;}
}
@-o-keyframes {// -o-transform
% {-o-transform: translateX(px) translateY(px);opacity:1.0;}
}
@keyframes {
% {transform: translateX(px) translateY(px);opacity:1.0;}
}
/* -------------------- END -------------------- */

#banner{width:960px;height:240px;overflow:hidden;background-color:#eee;margin-top:0px;position:relative;}

</style>

Div and Image Examples


<div class="" ></div>


<img class="" src="http://mooseloose.com/images/moose.png" />


<div id="banner">
<img class="" src="http://mooseloose.com/images/moose.png">
</div>


Click for CSS animatable properties

transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skew(30deg, 20deg)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

Interactivity


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<style>
.moosebutt {
background-color: #db6600;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
color: #ffffff;
border:1px solid #db6600;
}
.moosebutt:hover {
background-color: #000000;
border:1px solid #000000;
}
.pause {
border:1px solid red;
animation-play-state: paused ;
}
</style>

<button class="Stop moosebutt" value="Stop">Stop</button>
<button class="Start moosebutt" value="Start">Start</button>

<script>
$(document).ready(function(){
   $(".Stop").click(function(){
       $(".").addClass("pause");
   });
});

$(document).ready(function(){
   $(".Start").click(function(){
       $(".").removeClass("pause");
   });
});
</script>



References


inliner tool | Div and Grid Wizard | Hover Transform |

Modal Button


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


style="cursor:pointer" data-toggle="modal"data-target="#myModal01"


<button style="padding:0px; border:0px" data-toggle="modal"data-target="#myModal01"> </button>


<div class="modal fade" id="myModal01" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
</div>
</div>



.modal-header{
background-color:#369;
color:#fff
}
.modal-content{
background-color:#eee;
color:#000;
background-image:url(http://www.mooseloose.com/images/autumntbg.jpg);
width:300px;left300px
}
.modal-backdrop{
background-color:#369;
background-image:url(http://www.mooseloose.com/images/autumntbg.jpg);
}