Breaking News: Grepper is joining You.com. Read the official announcement!

transform-origin

Add Answer

Misty Marten answered on March 6, 2021 Popularity 10/10 Helpfulness 3/10

answer transform-origin

related transform origin css

related css transform origin

related transform-origin

transform-origin

Comment

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

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: developer.mozilla.org

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Jul 09 2021

Misty Marten

0 Answers Avg Quality 2/10

Closely Related Answers

transform origin css

Comment

/* transform origin default value is center */
img{
transition:transform 1s;
transform-origin:top; /*rotate from top  center*/
transform-origin:right; /*rotate from right middle */
transform-origin:top-right; /*rotate from top right */
transform-origin:30% 80%; /* rotate from 30% x and 80% bottom*/
transform-origin:300px 150px; /*rotate from 300px from x and 150px bottom */
}
img:hover{
 transform:rotate(45deg) /* rotate 45 deg clockwise */
}

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 26 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

css transform origin

Comment

/* 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)

*/

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 06 2021

Nervous Newt

0 Answers Avg Quality 2/10

transform-origin

Comment

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

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: developer.mozilla.org

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Jun 04 2021

Shy Skipper

0 Answers Avg Quality 2/10

transform-origin

Contents

More Related Answers

transform-origin

Closely Related Answers

transform origin css

css transform origin

transform-origin

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.