2

In the snippet below I have a div that's rotated 45 degrees. How can we shrink this div along the X axis without modifying the HTML at all?

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  display: flex;
}
div {
  width: 10rem;
  height: 10rem;
  margin: auto;
  background-image: linear-gradient( #eee, #888 );
  border-radius: 2rem;
  border-width: 0.05rem;
  border-color: #666;
  border-style: solid;
  
  transform: rotate( 45deg );
}
<div></div>

Example achieved using a wrapper element

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  display: flex;
}
div {
  margin: auto;
  
  transform: scaleX( 0.75 );
}
div > div {
  width: 10rem;
  height: 10rem;
  background-image: linear-gradient( #eee, #888 );
  border-radius: 2rem;
  border-width: 0.05rem;
  border-color: #666;
  border-style: solid;
  
  transform: rotate( 45deg );
}
<div>

  <div></div>
  
</div>

How can we achieve the above without adding any markup to the original example consisting of only 1 div? Of course we can do all things with JavaScript but the interest here is specifically if this is possible with only CSS. Perhaps through pseudo elements?

EDIT To explain why this is not a duplicate of How to apply multiple transforms in CSS? and simply placing the transforms on the same line a specific order does not work see the snippet below:

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  display: flex;
}
div {
  width: 10rem;
  height: 10rem;
  margin: auto;
  background-image: linear-gradient( #eee, #888 );
  border-radius: 2rem;
  border-width: 0.05rem;
  border-color: #666;
  border-style: solid;
  
  transform: rotate( 45deg ) scaleX( 0.75 );
}
<div></div>

The transforms from before aren't 'remembered'. The scaling is done from a perspective as if the div was still in its original position before it was rotated.

basement
  • 718
  • 8
  • 15
  • Possible duplicate of [How to apply multiple transforms in CSS?](https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css) – Jason Goemaat Aug 07 '17 at 19:58
  • 1
    Put them both on one line: `transform: scaleX(0.75) rotate( 45deg );`, the order is important. – Jason Goemaat Aug 07 '17 at 19:59
  • Thank you @JasonGoemaat but this isn't a duplicate. I'm not asking how to apply more than one transform to an element. I'm asking how to keep the previous transformations before the other rules are applied. – basement Aug 07 '17 at 19:59
  • @JasonGoemaat Please see my edit and the last Snippet I've provided. – basement Aug 07 '17 at 20:04
  • 1
    Check the order. With `scaleX` first, it works as expected. – Purag Aug 07 '17 at 20:07
  • @Purag You're right. Didn't think that would work here. Thank you so much. Make a answer if you want and I'll accept. – basement Aug 07 '17 at 20:09

0 Answers0