Demo CSS3

This text is too long, so it will be clipped
Text overflow:
white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
Rotate:
-moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
Rotate with transform-origin:
-moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); -moz-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom;
Scale:
-moz-transform: scale(-0.5, -0.7); -o-transform: scale(-0.5, -0.7); -ms-transform: scale(-0.5, -0.7); -webkit-transform: scale(-0.5, -0.7); transform: scale(-0.5, -0.7);
Translate:
-moz-transform: translate(30px, -40px); -o-transform: translate(30px, -40px); -ms-transform: translate(30px, -40px); -webkit-transform: translate(30px, -40px); transform: translate(30px, -40px);
Skew:
-moz-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg);
Combination:
-moz-transform: translate(30px, -30px) rotate(15deg); -webkit-transform: translate(30px, -30px) rotate(15deg); -o-transform: translate(30px, -30px) rotate(15deg); -ms-transform: translate(30px, -30px) rotate(15deg); transform: translate(30px, -30px) rotate(15deg);
Transition(with hover):
-moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: 1s all; (= 1000ms) -o-transition: 1s all; -ms-transform: 1s all; -webkit-transition: 1s all; transition: 1s all;
Transition delay:
-moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: 1s 1s all; -o-transition: 1s 1s all; -ms-transform: 1s 1s all; -webkit-transition: 1s 1s all; transition: 1s 1s all;
Transition timing:
-moz-transition-property: opacity, left; -o-transition-property: opacity, left; -webkit-transition-property: opacity, left; transition-property: opacity, left; -moz-transition-duration: 1s, 2s; -o-transition-duration: 1s, 2s; -webkit-transition-duration: 1s, 2s; transition-duration: 1s, 2s;
Transition timing:
-moz-transition-property: opacity, rotation, translate; -o-transition-property: opacity, rotation, translate; -webkit-transition-property: opacity, rotation, translate; transition-property: opacity, rotation, translate; -moz-transition-duration: 1s, 2s, 3s; -o-transition-duration: 1s, 2s, 3s; -webkit-transition-duration: 1s, 2s, 3s; transition-duration: 1s, 2s, 3s; hover opacity: 1; -moz-transform: rotate(30deg) translate(50px, -40px); -ms-transform: rotate(30deg) translate(50px, -40px); -o-transform: rotate(30deg) translate(50px, -40px); -webkit-transform: rotate(30deg) translate(50px, -40px); transform: rotate(30deg) translate(50px, -40px);
Transition with easing:
-moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: 1s cubic-bezier(0.43, -1.2, 0.49, 1.95) all; -o-transition: 1s cubic-bezier(0.43, -1.2, 0.49, 1.95) all; -ms-transform: 1s cubic-bezier(0.43, -1.2, 0.49, 1.95) all; -webkit-transition: 1s cubic-bezier(0.43, -1.2, 0.49, 1.95) all; transition: 1s cubic-bezier(0.43, -1.2, 0.49, 1.95) all; Easing types: linenear = cubic-bezier(0, 0, 1, 1) ease = cubic-bezier(0.25, 0.1, 0.25, 1) ease-in = cubic-bezier(0.42, 0, 1, 1) ease-out = cubic-bezier(0, 0, 0.58, 1) easy-in-out = cubic-bezier(0.42, 0, 0.58, 1) more
Transition in steps:
-moz-transition: 4s all steps(10, end); -o-transition: 4s all steps(10, end); -ms-transition: 4s all steps(10, end); -webkit-transition: 4s all steps(10, end); transition: 4s all steps(10, end); -moz-transform: translateX(400px); -o-transform: translateX(400px); -ms-transform: translateX(400px); -webkit-transform: translateX(400px); transform: translateX(400px);
Keyframe animation:
@-webkit-keyframes multislide{ 0% { left: 20px; } 20% { right: 200px; } 80% { left: 50 %; } 100% { right: 180px; } } #keyframe{ width: 100px; height: 150px; -webkit-animation-name: multislide; -webkit-animation-duration: 10.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 200ms; -webkit-animation-iteration-count: infinite; -webkit-animation-play-state: paused; } @keyframes mymove{ 0%{ left: 0px; transform: rotate(0deg); } 100%{ left: 800px; transform: rotate(3600deg); } } @-webkit-keyframes mymove{ 0%{ left: 0px; -webkit-transform: rotate(0deg); } 100%{ left: 800px; -webkit-transform: rotate(3600deg); } } #div-demo-css22{ position: relative; } #keyframe:hover{ animation: mymove 2s ease-in-out infinite alternate; -webkit-animation: mymove 2s ease-in-out infinite alternate; } more
Border radius:
-webkit-border-radius: 5px 10px 15px 20px; -moz-border-radius: 5px 10px 15px 20px; border-radius: 5px 10px 15px 20px;
Box shadow
box-shadow: (h-shadow v-shadow blur spread color inset) -moz-box-shadow: 10px 10px 10px 0px #888; -webkit-box-shadow: 10px 10px 10px 0px #888; box-shadow: 10px 10px 10px 0px #888;
Box shadow
-moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888;
Box shadow
-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888;
Box shadow
-moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px #888; box-shadow: 0 0 5px 5px #888;
Box shadow
-moz-box-shadow: 0 0 5px 5px #888 inset; -webkit-box-shadow: 0 0 5px 5px #888 inset; box-shadow: 0 0 5px 5px #888 inset;
Multiple box shadow
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue; -webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue; box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
Card fan
div#cardfan:hover img:first-child{ transform: rotate(-12deg); transform-origin: center 500px; } div#cardfan:hover img:last-child{ transform: rotate(12deg); transform-origin: center 500px; }