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 had to tweak my code a little from above.

It now works on all sides (not just up and down). I see a little edit, I think that is CSS issue (you could add another pixel to code to resolve this).

Here is the working Codepen link. Feel free to let me know if you use it. It felt good to finally figure this out.

https://codepen.io/cyansmiles/pen/bLOqZo

ps. I am forking my codepen to add a moveable CSS.

.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;
  color: #fff;
}

.box.size-80 {
  background: red;
  transform: scale(0.8);
  margin: 0 calc((-300px * (1 - 0.8)) / 2) calc(-150px * (1 - 0.8));
}

.box.size-70 {
  background: blue;
  transform: scale(0.7);
  margin: 0 calc((-300px * (1 - 0.7)) / 2) calc(-150px * (1 - 0.7));
}

.box.size-60 {
  background: green;
  transform: scale(0.6);
  margin: 0 calc((-300px * (1 - 0.6)) / 2) calc(-150px * (1 - 0.6));
}

.box.size-50 {
  background: orange;
  transform: scale(0.5);
  margin: 0 calc((-300px * (1 - 0.5)) / 2) calc(-150px * (1 - 0.5));
}

//etc

  
This is a bunch of boxes!
  

    
Box at 50%
  
  

    
Box at 60%
  
  

    
Box at 80%
  
  

    
Box at 70%
  
  

    
Box at 50%
  
  

    
Box at 60%
  
  

    
Box at 50%
  
  

    
Box at 60%
  
  

    
Box at 80%
  
  

    
Box at 70%
  
  

    
Box at 50%
  
  

    
Box at 60%
  



  

    
Box at 100%
  



  

    
Box at 80%
  



  

    
Box at 70%
  



  

    
Box at 60%
  



  

    
Box at 50%