1div {
2 width: 80px;
3 height: 80px;
4 background-color: skyblue;
5}
6
7.tourne {
8 transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
9 background-color: pink;
10}
11
1<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
2
3.image {
4 position: absolute;
5 top: 50%;
6 left: 50%;
7 width: 120px;
8 height: 120px;
9 margin:-60px 0 0 -60px;
10 -webkit-animation:spin 4s linear infinite;
11 -moz-animation:spin 4s linear infinite;
12 animation:spin 4s linear infinite;
13}
14@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
15@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
16@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
1<style>
2div {
3 width: 80px;
4 height: 80px;
5 background-color: skyblue;
6}
7.rotated {
8 transform: rotate(45deg);
9 background-color: pink;
10}
11</style>
12
13/* In body of html doc */
14<div>Normal</div>
15<div class="rotated">Rotated</div>
1div {
2 width: 80px;
3 height: 80px;
4 background-color: skyblue;
5}
6
7.rotated {
8 transform: rotate(45deg); /* Equal to rotateZ(45deg) */
9 background-color: pink;
10}
11
1transform: matrix(1, 2, 3, 4, 5, 6);
2transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
3transform: translate(120px, 50%);
4transform: scale(2, 0.5);
5transform: rotate(0.5turn);
6transform: skew(30deg, 20deg);
7transform: scale(0.5) translate(-100%, -100%);
8transform: perspective(17px);
9
1a:hover:before {
2 -webkit-transform:rotate(360deg);
3 -moz-transform:rotate(360deg);
4 -o-transform:rotate(360deg);
5}
6