<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 src="https://lh4.googleusercontent.com/-UUguAMJ00ys/UHzRgDzjYmI/AAAAAAAACgE/5KJGtNxZ044/s128/US.gif"/>
</div>
<hr/>
body{margin:2px}
h3{
text-shadow: 5px 5px 0 lightgray;
font-size: x-large;
}
.box{
outline: black solid 2px;
}
.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, 0deg);
}
.transform2d225{
-ms-transform: translate(0px, 0px) rotate(225deg) scale(1) skew(0deg, 0deg);
-webkit-transform: translate(0px, 0px) rotate(225deg) scale(1) skew(0deg, 0deg);
-moz-transform: translate(0px, 0px) rotate(225deg) scale(1) skew(0deg, 0deg);
-o-transform: translate(0px, 0px) rotate(225deg) scale(1) skew(0deg, 0deg);
transform: translate(0px, 0px) rotate(225deg) scale(1) skew(0deg, 0deg);
}
.transform2d270{
-ms-transform: translate(0px, 0px) rotate(270deg) scale(1) skew(0deg, 0deg);
-webkit-transform: translate(0px, 0px) rotate(270deg) scale(1) skew(0deg, 0deg);
-moz-transform: translate(0px, 0px) rotate(270deg) scale(1) skew(0deg, 0deg);
-o-transform: translate(0px, 0px) rotate(270deg) scale(1) skew(0deg, 0deg);
transform: translate(0px, 0px) rotate(270deg) scale(1) skew(0deg, 0deg);
}
.transform2d315{
-ms-transform: translate(0px, 0px) rotate(315deg) scale(1) skew(0deg, 0deg);
-webkit-transform: translate(0px, 0px) rotate(315deg) scale(1) skew(0deg, 0deg);
-moz-transform: translate(0px, 0px) rotate(315deg) scale(1) skew(0deg, 0deg);
-o-transform: translate(0px, 0px) rotate(315deg) scale(1) skew(0deg, 0deg);
transform: translate(0px, 0px) rotate(315deg) scale(1) skew(0deg, 0deg);
}
.transform2d360{
-ms-transform: translate(0px, 0px) rotate(360deg) scale(1) skew(0deg, 0deg);
-webkit-transform: translate(0px, 0px) rotate(360deg) scale(1) skew(0deg, 0deg);
-moz-transform: translate(0px, 0px) rotate(360deg) scale(1) skew(0deg, 0deg);
-o-transform: translate(0px, 0px) rotate(360deg) scale(1) skew(0deg, 0deg);
transform: translate(0px, 0px) rotate(360deg) scale(1) skew(0deg, 0deg);
}
.transform3dLeft {
-ms-transform: perspective(110px) rotateY(45deg);
-webkit-transform: perspective(110px) rotateY(45deg);
-moz-transform: perspective(110px) rotateY(45deg);
-o-transform: perspective(110px) rotateY(45deg);
transform-origin-x: 50%; transform-origin-y: 50%; transform: perspective(110px) rotateY(45deg);
}
.transform3dRight {
-ms-transform: perspective(110px) rotateY(135deg);
-webkit-transform: perspective(110px) rotateY(135deg);
-moz-transform: perspective(110px) rotateY(135deg);
-o-transform: perspective(110px) rotateY(135deg);
transform-origin-x: 50%; transform-origin-y: 50%; transform: perspective(110px) rotateY(135deg);
}
.box {
border: 1px solid black;
background-color: red;
width: 50px;
height: 25px;
position: relative;
}
.imgDiv {
position: relative;
width:72px;
height: 72px;
}
#boxAnimation {
-ms-animation: 'not-knight-rider'; -ms-animation-duration: 5s; -ms-animation-iteration-count: 100;
-webkit-animation: 'not-knight-rider'; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: 100;
-moz-animation: 'not-knight-rider'; -moz-animation-duration: 5s; -moz-animation-iteration-count: 100;
-o-animation: 'not-knight-rider'; -o-animation-duration: 5s; -o-animation-iteration-count: 100;
animation: 'not-knight-rider'; animation-duration: 5s; animation-iteration-count: 100;
}
@keyframes not-knight-rider {from {left: -100px;} 25% {left: 100px; opacity: 0.5;} 50% {left: 200px; opacity: 0;} 75% {left: 300px; opacity: 0.5;} to {left: 800px;}}
@-ms-keyframes not-knight-rider {from {left: -100px;} 25% {left: 100px; opacity: 0.5;} 50% {left: 200px; opacity: 0;} 75% {left: 300px; opacity: 0.5;} to {left: 800px;}}
@-webkit-keyframes not-knight-rider {from {left: -100px;} 25% {left: 100px; opacity: 0.5;} 50% {left: 200px; opacity: 0;} 75% {left: 300px; opacity: 0.5;} to {left: 800px;}}
@-moz-keyframes not-knight-rider {from {left: -100px;} 25% {left: 100px; opacity: 0.5;} 50% {left: 200px; opacity: 0;} 75% {left: 300px; opacity: 0.5;} to {left: 800px;}}
@-o-keyframes not-knight-rider {from {left: -100px;} 25% {left: 100px; opacity: 0.5;} 50% {left: 200px; opacity: 0;} 75% {left: 300px; opacity: 0.5;} to {left: 800px;}}
#imgAnimation {
-ms-animation: 'img-rotator'; -ms-animation-duration: 10s; -ms-animation-iteration-count: 100;
-webkit-animation: 'img-rotator'; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 100;
-moz-animation: 'img-rotator'; -moz-animation-duration: 10s; -moz-animation-iteration-count: 100;
-o-animation: 'img-rotator'; -o-animation-duration: 10s; -o-animation-iteration-count: 100;
animation: 'img-rotator'; animation-duration: 10s; animation-iteration-count: 100;
}
@keyframes img-rotator {from {transform: rotateX(0deg) rotateY(0deg); left: 100px; top: 0px; opacity: 1; }
10% {transform: rotateX(36deg) rotateY(5deg); left: 200px; top: 100px; opacity: 0.9;}
20% {transform: rotateX(72deg) rotateY(10deg); left: 300px; top: 0px; opacity: 0.8;}
30% {transform: rotateX(108deg) rotateY(15deg); left: 400px; top: 100px; opacity: 0.7;}
40% {transform: rotateX(144deg) rotateY(20deg); left: 500px; top: 0px; opacity: 0.6;}
50% {transform: rotateX(180deg) rotateY(25deg); left: 600px; top: 100px; opacity: 0.5;}
60% {transform: rotateX(216deg) rotateY(20deg); left: 700px; top: 0px; opacity: 0.6;}
70% {transform: rotateX(252deg) rotateY(15deg); left: 800px; top: 100px; opacity: 0.7;}
80% {transform: rotateX(288deg) rotateY(10deg); left: 900px; top: 0px; opacity: 0.8;}
90% {transform: rotateX(324deg) rotateY(5deg); left: 1000px; top: 100px; opacity: 0.9;}
to {transform: rotateX(360deg) rotateY(0deg); left: 1100px; top: 0px; opacity: 1; }}
@-ms-keyframes img-rotator {from {-ms-transform: rotateX(0deg) rotateY(0deg); left: 100px; top: 0px; opacity: 1; }
10% {-ms-transform: rotateX(36deg) rotateY(5deg); left: 200px; top: 100px; opacity: 0.9;}
20% {-ms-transform: rotateX(72deg) rotateY(10deg); left: 300px; top: 0px; opacity: 0.8;}
30% {-ms-transform: rotateX(108deg) rotateY(15deg); left: 400px; top: 100px; opacity: 0.7;}
40% {-ms-transform: rotateX(144deg) rotateY(20deg); left: 500px; top: 0px; opacity: 0.6;}
50% {-ms-transform: rotateX(180deg) rotateY(25deg); left: 600px; top: 100px; opacity: 0.5;}
60% {-ms-transform: rotateX(216deg) rotateY(20deg); left: 700px; top: 0px; opacity: 0.6;}
70% {-ms-transform: rotateX(252deg) rotateY(15deg); left: 800px; top: 100px; opacity: 0.7;}
80% {-ms-transform: rotateX(288deg) rotateY(10deg); left: 900px; top: 0px; opacity: 0.8;}
90% {-ms-transform: rotateX(324deg) rotateY(5deg); left: 1000px; top: 100px; opacity: 0.9;}
to {-ms-transform: rotateX(360deg) rotateY(0deg); left: 1100px; top: 0px; opacity: 1; }}
@-webkit-keyframes img-rotator {from {-webkit-transform: rotateX(0deg) rotateY(0deg); left: 100px; top: 0px; opacity: 1; }
10% {-webkit-transform: rotateX(36deg) rotateY(5deg); left: 200px; top: 100px; opacity: 0.9;}
20% {-webkit-transform: rotateX(72deg) rotateY(10deg); left: 300px; top: 0px; opacity: 0.8;}
30% {-webkit-transform: rotateX(108deg) rotateY(15deg); left: 400px; top: 100px; opacity: 0.7;}
40% {-webkit-transform: rotateX(144deg) rotateY(20deg); left: 500px; top: 0px; opacity: 0.6;}
50% {-webkit-transform: rotateX(180deg) rotateY(25deg); left: 600px; top: 100px; opacity: 0.5;}
60% {-webkit-transform: rotateX(216deg) rotateY(20deg); left: 700px; top: 0px; opacity: 0.6;}
70% {-webkit-transform: rotateX(252deg) rotateY(15deg); left: 800px; top: 100px; opacity: 0.7;}
80% {-webkit-transform: rotateX(288deg) rotateY(10deg); left: 900px; top: 0px; opacity: 0.8;}
90% {-webkit-transform: rotateX(324deg) rotateY(5deg); left: 1000px; top: 100px; opacity: 0.9;}
to {-webkit-transform: rotateX(360deg) rotateY(0deg); left: 1100px; top: 0px; opacity: 1; }}
@-moz-keyframes img-rotator {from {-moz-transform: rotateX(0deg) rotateY(0deg); left: 100px; top: 0px; opacity: 1; }
10% {-moz-transform: rotateX(36deg) rotateY(5deg); left: 200px; top: 100px; opacity: 0.9;}
20% {-moz-transform: rotateX(72deg) rotateY(10deg); left: 300px; top: 0px; opacity: 0.8;}
30% {-moz-transform: rotateX(108deg) rotateY(15deg); left: 400px; top: 100px; opacity: 0.7;}
40% {-moz-transform: rotateX(144deg) rotateY(20deg); left: 500px; top: 0px; opacity: 0.6;}
50% {-moz-transform: rotateX(180deg) rotateY(25deg); left: 600px; top: 100px; opacity: 0.5;}
60% {-moz-transform: rotateX(216deg) rotateY(20deg); left: 700px; top: 0px; opacity: 0.6;}
70% {-moz-transform: rotateX(252deg) rotateY(15deg); left: 800px; top: 100px; opacity: 0.7;}
80% {-moz-transform: rotateX(288deg) rotateY(10deg); left: 900px; top: 0px; opacity: 0.8;}
90% {-moz-transform: rotateX(324deg) rotateY(5deg); left: 1000px; top: 100px; opacity: 0.9;}
to {-moz-transform: rotateX(360deg) rotateY(0deg); left: 1100px; top: 0px; opacity: 1; }}
@-o-keyframes img-rotator {from {-o-transform: rotateX(0deg) rotateY(0deg); left: 100px; top: 0px; opacity: 1; }
10% {-o-transform: rotateX(36deg) rotateY(5deg); left: 200px; top: 100px; opacity: 0.9;}
20% {-o-transform: rotateX(72deg) rotateY(10deg); left: 300px; top: 0px; opacity: 0.8;}
30% {-o-transform: rotateX(108deg) rotateY(15deg); left: 400px; top: 100px; opacity: 0.7;}
40% {-o-transform: rotateX(144deg) rotateY(20deg); left: 500px; top: 0px; opacity: 0.6;}
50% {-o-transform: rotateX(180deg) rotateY(25deg); left: 600px; top: 100px; opacity: 0.5;}
60% {-o-transform: rotateX(216deg) rotateY(20deg); left: 700px; top: 0px; opacity: 0.6;}
70% {-o-transform: rotateX(252deg) rotateY(15deg); left: 800px; top: 100px; opacity: 0.7;}
80% {-o-transform: rotateX(288deg) rotateY(10deg); left: 900px; top: 0px; opacity: 0.8;}
90% {-o-transform: rotateX(324deg) rotateY(5deg); left: 1000px; top: 100px; opacity: 0.9;}
to {-o-transform: rotateX(360deg) rotateY(0deg); left: 1100px; top: 0px; opacity: 1; }}
#imgAnimation1 {
-ms-animation: 'img-rotator1'; -ms-animation-duration: 1s; -ms-animation-iteration-count: 100;
-webkit-animation: 'img-rotator1'; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 100;
-moz-animation: 'img-rotator1'; -moz-animation-duration: 1s; -moz-animation-iteration-count: 100;
-o-animation: 'img-rotator1'; -o-animation-duration: 1s; -o-animation-iteration-count: 100;
animation: 'img-rotator1'; animation-duration: 1s; animation-iteration-count: 100;
}
@keyframes img-rotator1 {from { transform: perspective(110px) rotateY(0deg) rotateX(0deg) ; }
50% { transform: perspective(110px) rotateY(180deg) rotateX(180deg) ; }
to { transform: perspective(110px) rotateY(360deg) rotateX(360deg) ; }}
@-ms-keyframes img-rotator1 {from { -ms-transform: perspective(110px) rotateY(0deg) rotateX(0deg) ; }
50% { -ms-transform: perspective(110px) rotateY(180deg) rotateX(180deg) ; }
to { -ms-transform: perspective(110px) rotateY(360deg) rotateX(360deg) ; }}
@-moz-keyframes img-rotator1 {from { -moz-transform: perspective(110px) rotateY(0deg) rotateX(0deg) ; }
50% { -moz-transform: perspective(110px) rotateY(180deg) rotateX(180deg) ; }
to { -moz-transform: perspective(110px) rotateY(360deg) rotateX(360deg) ; }}
@-webkit-keyframes img-rotator1 {from { -webkit-transform: perspective(110px) rotateY(0deg) rotateX(0deg) ; }
50% { -webkit-transform: perspective(110px) rotateY(180deg) rotateX(0deg) ; }
to { -webkit-transform: perspective(110px) rotateY(360deg) rotateX(0deg) ; }}
@-o-keyframes img-rotator1 {from { -o-transform: perspective(110px) rotateY(0deg) rotateX(0deg) ; }
50% { -o-transform: perspective(110px) rotateY(180deg) rotateX(180deg) ; }
to { -o-transform: perspective(110px) rotateY(360deg) rotateX(360deg) ; }}
External resources loaded into this fiddle: