rotate css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.tourne {
transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
background-color: pink;
}Source: developer.mozilla.org
css rotate animation
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }Source: stackoverflow.com
rotate element css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}Source: developer.mozilla.org
css transform
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%);
transform: perspective(17px);
Source:developer.mozilla.org
rotate css
.rotate {
animation: rotation 1s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Source: cssf1.com
rotate css
.dialog-close-button.dialog-lightbox-close-button::after{
background-image: url('http://psifass.appupgo.co.il/wp-content/uploads/2021/12/indoor-hotel-view-Large.png');
display: block;
height: 40px;
width: 40px;
content:"";
/*transform: rotate(48deg);*/
font-family: assistant;
color: #FFF;
font-weight: 300;
font-size: 98px;
margin-left: 10px;
}