css transform origin rotate

Solutions on MaxInterview for css transform origin rotate by the best coders in the world

showing results for - "css transform origin rotate"

07 May 2020

1<!DOCTYPE HTML>
2<html>
3 <head>
4  <meta charset="utf-8">
5  <title>transform-origin</title>
6  <style>
7   div {
8    background: #fc0;
9    padding: 10px;
10    display: inline-block;
11    border: 1px solid #000;
12   }
13   div:hover {
14    /* Точка поворота в правом верхнем углу */
15    -webkit-transform-origin: 100% 0;
16    -moz-transform-origin: 100% 0;
17    -o-transform-origin: 100% 0;
18    -ms-transform-origin: 100% 0;
19    transform-origin: 100% 0;
20    /* Поворачиваем на 20 градусов против часовой стрелки */
21    -webkit-transform: rotate(-20deg);
22    -moz-transform: rotate(-20deg);
23    -o-transform: rotate(-20deg);
24    -ms-transform: rotate(-20deg);
25    transform: rotate(-20deg);
26   }
27  </style>
28 </head>
29 <body>
30  <div>Пример</div>
31 </body>
32</html>

source

queries leading to this page

css transform origin css transform origin rotate