Answers for "transform origin css"

center with css

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Posted by: Guest on January-03-2020

css transform origin

/* Syntax */
transform-origin: y-axis x-axis z-axis|initial|inherit;

/* Example */
transform-origin: center right;

/* Possible Values

 x-axis - left, center, right, (length), (%)
 y-axis - top, center, bottom, (length), (%)
 z-axis - (length)

*/

Posted by: Guest on March-06-2021

transform orgin css

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Posted by: Guest on July-10-2020

transform-origin

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Posted by: Guest on July-09-2021

Source

transform-origin

transform-origin: -100% 50%;
transform: rotate(45deg);

Posted by: Guest on June-04-2021

Source

css transform origin rotate

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
   div {
    background: #fc0;
    padding: 10px;
    display: inline-block;
    border: 1px solid #000;
   }
   div:hover {
    /* Точка поворота в правом верхнем углу */
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    /* Поворачиваем на 20 градусов против часовой стрелки */
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
   }
  </style>
 </head>
 <body>
  <div>Пример</div>
 </body>
</html>

Posted by: Guest on August-17-2021

Source