Example 1 : CSS3 Transition Tutorial and Reference
Transition Example
Example : CSS3 Transition Property.
width: 150px;
height: 100px;
background: #16a085;
color: #fff;
padding-top 20px;
-webkit-transition: background 1s,color 1s,width 1s,height 1s;
transition-property: background,color,width,height;
transition-duration: 1s,1s,1s,1s;
}
.example-div:hover {
background: #1ec7e6;
width: 200px;
height: 110px;
color: brown;
}
Example 1.2 : CSS3 Transition Tutorial and Reference : Changing multiple properties of an element with CSS3 Transition
Transition Example
Example : use of CSS3 Transition Property.
width: 150px;
height: 100px;
padding: 10px;
float: left;
background: #16a085;
color: #fff;
position: absolute;
font-weight: bold;
font-size: 25px;
margin: 5px;
-webkit-border-radius: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,color 1s,width 1s,height 1s,font-size 1s;
border-radius: 5px;
opacity: 0.8;
text-shadow: 1px 0px 2px #000;
}
.animated-box:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0.9;
background: #1ec7e6;
width: 200px;
height: 100px;
font-size: 30px;
color: brown;
}
Example 2 : CSS3 Animation Tutorial and Reference
Animation Example
Example : use of CSS3 Animation Property.
width: 60px;
height: 40px;
padding: 10px;
background: #1ec7e6;
color: #fff;
position: relative;
font-weight: bold;
font-size: 20px;
-webkit-border-radius: 5px;
animation: animation-demo 5s 1;
-moz-animation: animation-demo 5s 1;
-webkit-animation: animation-demo 5s 1;
-o-animation: animation-demo 5s 1;
}
@keyframes animation-demo {
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(10deg);left:0px;}
50% {transform: rotate(0deg);left:300px;}
75% {transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {transform: rotate(-360deg);left:0px;}
}
@-webkit-keyframes animation-demo {
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(10deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:300px;}
75% {-webkit-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}
@-moz-keyframes animation-demo {
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(10deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:300px;}
75% {-moz-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}
@-o-keyframes animation-demo {
0% {-o-transform: rotate(0deg);left:0px;}
25% {-o-transform: rotate(10deg);left:0px;}
50% {-o-transform: rotate(0deg);left:300px;}
75% {-o-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-o-transform: rotate(-360deg);left:0px;}
}
Example 3.1 : CSS3 Transform Tutorial and Reference : 2D transform : rotate() method
Example : use of CSS3 2D transform : Rotate() Method.
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
}
Example 3.2 : CSS3 Transform Tutorial and Reference : Css3 2D transform : translate() method
Example : use of CSS3 2D transform : Translate() Method.
transform: translate(60px,100px);
-webkit-transform: translate(60px,100px);
}
Example 3.3 : CSS3 Transform Tutorial & Reference : Css3 2D transform : skew() method
Example : use of CSS3 2D transform : Skew() Method.
transform: skew(40deg,20deg);
-webkit-transform: skew(40deg,20deg);
}
Example 3.4 : CSS3 Transform Tutorial & Reference : CSS3 2D transform : matrix() method
Example : use of CSS3 2D transform : Matrix() Method.
transform: matrix(0.800,0.5,-0.5,0.806,0,0);
-webkit-transform: matrix(0.800,0.5,-0.5,0.806,0,0);
}
Example 3.5 : CSS3 Transform Tutorial and Reference : CSS3 2D transform : scale() method
Example : use of CSS3 2D transform : Scale() Method.
transform: scale(3,4);
-webkit-transform: scale(3,4);
}
Example 3.6 : CSS3 Transform Tutorial and Reference :CSS3 3D Transform
Example 3.6.1 : CSS3 Transform Tutorial & Reference : 3D transform : rotateX() method
Example : use of CSS3 3D transform : RotateX() Method.
transform: rotateX(110deg);
-webkit-transform: rotateX(110deg);
}
Example 3.6.2 : CSS3 Transform Tutorial and Reference : 3D transform : rotateY() method
Example : use of CSS3 3D transform : RotateY() Method.
transform: rotateY(110deg);
-webkit-transform: rotateY(110deg);
}
Example 4 : CSS3 Shadow Tutorial & Reference
Example : use of CSS3 : Box-shadow Property
width: 300px;
height: 100px;
background: green;
box-shadow: 9px 10px 10px 1px #000
}
Example 4.2 : text-shadow Property Tutorial and Reference
Text Shadow Example
Example : use of CSS3 : Text-shadow Property
width: 300px;
height: 100px;
background: yellow;
color: blue;
text-align: center;
}
h4 {
text-shadow: 6px 5px 8px #000;
padding-top: 20px;
}
Also Related to CSS
- CSS Tutorial and CSS Reference
- Css Examples
- Css Media Types Tutorial And Reference
- Css Selector Tutorial And Reference
- CSS3 Animation Tutorial and CSS3 Reference
- CSS3 Examples
- CSS3 Media Queries Tutorial
- CSS3 Selector Tutorial and CSS3 Selector Reference
- CSS3 Shadow Tutorial and CSS3 Shadow Reference
- CSS3 Transform Tutorial and CSS3 Transform Reference
- CSS3 Transition Tutorial and CSS3 Transition Reference