CSS Examples

CSS Examples

by deshpandeakhil

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<h2>CSSExamples</h2>
<br/><br/>
<h3>CSS Transformations</h3> 
<button class="btn-mini" data-toggle="collapse" data-target="#cssTransform"><i class="icon-resize-full"></i></button> <br/>
<div id="cssTransform" class="collapse">
    Original Image: <i class="icon-arrow-right"></i> <br/>
    Transformed 2d 45 deg: <i class="icon-arrow-right transform2d45"></i> <br/>
    Transformed 2d 90 deg: <i class="icon-arrow-right transform2d90"></i> <br/>
    Transformed 2d 135 deg: <i class="icon-arrow-right transform2d135"></i> <br/>
    Transformed 2d 180 deg: <i class="icon-arrow-right transform2d180"></i> <br/>
    Transformed 2d 225 deg: <i class="icon-arrow-right transform2d225"></i> <br/>
    Transformed 2d 270 deg: <i class="icon-arrow-right transform2d270"></i> <br/>
    Transformed 2d 315 deg: <i class="icon-arrow-right transform2d315"></i> <br/>
    Transformed 2d 360 deg: <i class="icon-arrow-right transform2d360"></i> <br/>
</div>
<br/><br/>
<h3>CSS 3D Transformations</h3> <br/><br/>
<img class="transform3dLeft" src="https://lh5.googleusercontent.com/-h6yDbjwFPXs/UHzRfimGSQI/AAAAAAAACf8/Lpbk1L5qZjo/s128/square.png"/>
<img src="https://lh5.googleusercontent.com/-h6yDbjwFPXs/UHzRfimGSQI/AAAAAAAACf8/Lpbk1L5qZjo/s128/square.png"/>
<img class="transform3dRight" src="https://lh5.googleusercontent.com/-h6yDbjwFPXs/UHzRfimGSQI/AAAAAAAACf8/Lpbk1L5qZjo/s128/square.png"/>
<br/><br/><br/><br/>
<div class="box" id="boxAnimation"></div>
<br/><br/><br/><br/>
<div class="imgDiv" id="imgAnimation">
    <img src="https://lh3.googleusercontent.com/-E_wSXBYAyLI/TeaF8-gteaI/AAAAAAAAB34/-CbIeG3RKFo/s128/5.jpg"/>
</div>
<br/><br/><br/><br/>
<div class="imgDiv" id="imgAnimation1">
    <img...

CSS

body{margin:2px}
h3{
  text-shadow: 5px 5px 0 lightgray;
    font-size: x-large;
}
.box{
    outline: black solid 10px;
}
.btn-mini:hover{
    -ms-transform: scale(1.5);  
    -webkit-transform: scale(1.5);  
    -moz-transform: scale(1.5);  
    -o-transform: scale(1.5);
    transform: scale(1.5);
    
}

.transform2d45{
    -ms-transform: translate(0px, 0px) rotate(45deg) scale(1) skew(0deg, 0deg);
    -webkit-transform: translate(0px, 0px) rotate(45deg) scale(1) skew(0deg, 0deg);
    -moz-transform: translate(0px, 0px) rotate(45deg) scale(1) skew(0deg, 0deg);
    -o-transform: translate(0px, 0px) rotate(45deg) scale(1) skew(0deg, 0deg);
    transform: translate(0px, 0px) rotate(45deg) scale(1) skew(0deg, 0deg);
}

.transform2d90{
    -ms-transform: translate(0px, 0px) rotate(90deg) scale(1) skew(0deg, 0deg);
    -webkit-transform: translate(0px, 0px) rotate(90deg) scale(1) skew(0deg, 0deg);
    -moz-transform: translate(0px, 0px) rotate(90deg) scale(1) skew(0deg, 0deg);
    -o-transform: translate(0px, 0px) rotate(90deg) scale(1) skew(0deg, 0deg);
    transform: translate(0px, 0px) rotate(90deg) scale(1) skew(0deg, 0deg);
}

.transform2d135{
    -ms-transform: translate(0px, 0px) rotate(135deg) scale(1) skew(0deg, 0deg);
    -webkit-transform: translate(0px, 0px) rotate(135deg) scale(1) skew(0deg, 0deg);
    -moz-transform: translate(0px, 0px) rotate(135deg) scale(1) skew(0deg, 0deg);
    -o-transform: translate(0px, 0px) rotate(135deg) scale(1) skew(0deg, 0deg);
    transform: translate(0px, 0px) rotate(135deg) scale(1) skew(0deg, 0deg);
}

.transform2d180{
    -ms-transform: translate(0px, 0px) rotate(180deg) scale(1) skew(0deg, 0deg);
    -webkit-transform: translate(0px, 0px) rotate(180deg) scale(1) skew(0deg, 0deg);
    -moz-transform: translate(0px, 0px) rotate(180deg) scale(1) skew(0deg, 0deg);
    -o-transform: translate(0px, 0px) rotate(180deg) scale(1) skew(0deg, 0deg);
    transform: translate(0px, 0px) rotate(180deg) scale(1) skew(0deg,...