Comments on: transform-origin

By: Göran

Göran — Thu, 02 Feb 2023 00:50:44 +0000

Is there any special reason you are using
transform-origin: top left
instead of
transform-origin: left top ?
I would have thought the first value refers to horizontal position whereas the second value refers to vertical position. Or is it the case that the order of values does not matter when using keywords such as left, right, center, top etc?

By: GermanChris

GermanChris — Mon, 15 Oct 2018 10:37:00 +0000

In reply to Steve.

I just had the same problem and solved it like this:
– you first have to flip the DIV to the left (rotate -90) on its bottom left corner.
– then you shift it to the right (left: Xpx) by the exact amount of pixels as the original height !
Result: the original top-left corner has moved to the original bottom left corner and thus scaling works as expected.
Here’s the html code:

test

and css:
.vertical {
height: 30px;
width: 60 px;
transform-origin: bottom left;
transform: rotate(-90deg);
left: 30px;
}
regards,
GermanChris

By: Edd

Edd — Mon, 08 Aug 2016 16:01:35 +0000

In reply to trisha. Welcome to CSS Tricks!

By: Dom

Dom — Wed, 27 Jul 2016 18:43:04 +0000

Well I’ve been looking for this all freaking day. Thanks Chris.

By: Korey

Korey — Tue, 26 Jan 2016 16:42:15 +0000

In reply to Steve.

Did you ever find out the solution to this?
Because this is the EXACT problem that I am having….

By: Gopal Sharma

Gopal Sharma — Sat, 28 Nov 2015 08:48:37 +0000

Hello ,
This is good, but can anybody help me for this complicated task…
I want to make a div which have bottom-right corner edge is longer then the Top-right corner edge(i.e.. Lower line is longer than the upper one). How can achieve this ?

By: Brian Ellis

Brian Ellis — Wed, 06 May 2015 16:36:37 +0000

In reply to whole cat. You'd simply use the tag attribute transform-origin: initial; as reset value. See Transform Origin Attributes

By: Brian Ellis

Brian Ellis — Wed, 06 May 2015 16:33:05 +0000

In reply to trisha. Unless you're talking about fallback coding CSS tricks are for CSS tricks, rarely is JS used anywhere for the actual affect. If you refer to Codepen you can see there is minimal JS and no libraries are used. This would defeat the CSS workaround in the first place. As such though besides IE9(and lower) vendor prefixes should support all other browsers for these methods in most cases.

By: whole cat

whole cat — Sat, 28 Feb 2015 20:26:50 +0000

Hi!
Tell me, please, can i specify transform-origin for rotation only and disable this effect for other properties.

By: Steve

Steve — Tue, 10 Feb 2015 21:29:35 +0000

Hi. I’m wondering if this might be a way solve an issue I’m having.

I’ve used transform: scale(.5,.5); but my margins behave as though the item has not been scaled. When I resize the browser, the left margin cause the item to push away from the edge. When I inspect elements and turn off the transform, I can see that the item is reacting to the original size (pre-transform).

Is there a way to use transform-origin to correct this? I tried transform-origin: 25%50%; however the problem persists, just at different proportions.

I am referring to the bottom image on this page: stephendanison.com/mondrian

By: Benjamin Reid

Benjamin Reid — Thu, 26 Jun 2014 13:09:41 +0000

In reply to trisha.

You’d be best of using https://github.com/madrobby/vapor.js, pretty good for implementing these transforms.

By: Siubeans

Siubeans — Wed, 12 Mar 2014 02:29:45 +0000

In reply to trisha. None, it's pure CSS.

By: trisha

trisha — Mon, 03 Mar 2014 21:59:41 +0000

what jquery library should i use for this code?

By: rohan Saka

rohan Saka — Mon, 09 Dec 2013 07:14:02 +0000

Css- tricks.com is really usefull for web designers.. :)