CSS Transform with element resizing

Question

I found this: width/height after transform

and several others, but nothing is not quite what I\'m looking for. What I want is to scale something to 50% of it\'s siz

Answer 1

I finally figured out a simple solution and it is much similar than where I started from.

I will admit, it took many attempts to figure this out (over the last year or so) to finally figure it out. I was actually looking for an answer to this question. I have had problems with this before. Anyways, I started working this out again and I did find a simple solution.

Anyways, the trick was to use the margin bottom together with the CSS calc script.

Also, you must have to have absolute height declared for the the object (div). I dont think this will work with if the div can expand, otherwise, after many attempts and hours on this I finally have a very simple, clean, working solution.

So, for example, height = 300px (not 30%, or no height). I would even set overflow-y = hidden if you can. If you want the div to grow (not have an absolute height), I believe you will need JavaScript. I did not try it. Otherwise this is working correctly in all tests.

I am sure this will work nice with SASS or LESS since you could declare some of the repeated things using variables in the CSS. I have not tried that yet.

Some important comments on my solution:

1. Notice I am using the height of the object and a CSS calc method together with the transform size to figure out the bottom margin.
2. I color coded my work to help show what is happening.
3. the wrap div does have padding are there only to show it is working. They are absolute and it does not affect the internal object.
4. If you were building a responsive page, like I am, you can use media queries vs classes to get the same affect.
5. I am using transform-origin: 50% 0; This code ended up not being as important as I originally thought it would be. I am using the bottom margin to resolve the problems I had had.
6. In this example, I am just centering the div in the parent div. If you need to place the div, it is a little more complicated, but a similar solution will work. I did not attempt it.
7. You could use this same solution with jQuery vs CSS. The idea is the same. You would search for all elements with the transform in the page and add the CSS as needed.

I have also have set up a Codepen to test this with and for sharing.

https://codepen.io/cyansmiles/details/yvGaVP

.box-wrap {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  text-align: center;
  margin: 30px 10px;
  padding: 40px;
  background: yellow;
}

.box-wrap:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  top: 40px;
  left: 40px;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  transform-origin: 50% 0;
  width: 300px;
  height: 150px;
  background: red;
}

.box.size-80 {
  transform: scale(0.8);
  margin: 0 auto calc(-150px * (1 - 0.8));
}

.box.size-70 {
  transform: scale(0.7);
  margin: 0 auto calc(-150px * (1 - 0.7));
}

.box.size-60 {
  transform: scale(0.6);
  margin: 0 auto calc(-150px * (1 - 0.6));
}

.box.size-50 {
  transform: scale(0.5);
  margin: 0 auto calc(-150px * (1 - 0.5));
}

//etc

  

    
Box at 100%
  



  

    
Box at 80%
  



  

    
Box at 70%
  



  

    
Box at 60%
  



  

    
Box at 50%