CSS: Wrong Position of "Transform: Scale();" Container Children

CSS: Wrong position of transform: scale(); container children

Add to .wrap:

.wrap {
  ...
  position: relative;
  /*some prefix*/-transform-origin: 0 0;
}

You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.

See: When using CSS Scale in Firefox, element keeps original position

Transform scale change position element after in hover

First of all, the transform in your hover (.icon-style:hover::after) is overwriting your transform: translate(-50%, -50%);. A way to fix it is to add the translate to the hover too:

.icon-style:hover::after {
    opacity: 1;
    transform: scale(1.2) translate(-50%, -50%);
}

Then you have to define your transform-origin in .icon-style to top left;

*{    background-color: black;}.pos-footer {    position: absolute;    bottom: 20px;    right: 30px;}.icon-social {    display: flex;}.icon-social-pos {    position: relative;}.icon-style {    position: relative;    background-repeat: no-repeat;    background-position: center;     width: 30px;    height: 30px;    background-color: rgba(255, 255, 255, 0.25);    padding: 10px;    border-radius: 50%;    transition: background-color .3s ease-in-out;}.icon-style:hover {    background-color: rgba(255, 255, 255, 0.7);}.icon-style::after {    content: '';    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    transform-origin: top left;    z-index: 1;    width: 100%;    height: 100%;    border: 5px solid rgba(255, 255, 255, 0.425);    border-radius: 50%;    padding: 7px;    opacity: 0;    transition: all .4s ease-in-out;}.icon-style:hover::after {    opacity: 1;    transform: scale(1.2) translate(-50%, -50%);}.icon-github {    background-image: url("https://img.icons8.com/windows/30/000000/github.png");    margin-right: 10px;}.icon-linkedin {    background-image: url("https://img.icons8.com/ios-glyphs/22/000000/linkedin-2.png");    margin-left: 10px;}

<div class="pos-footer">    <div class="icon-social">        <a href="#">            <div class="icon-social-pos">                <div class="icon-style icon-github"></div>            </div>        </a>        <a href="#">            <div class="icon-social-pos">                <div class="icon-style icon-linkedin"></div>            </div>        </a>    </div></div>

transform scale/rotate effect in CSS should not affect the child

An alternative solution would be using a pseudo selector (:before) which gets the rotation on :hover.

html {  background-color: rgba(0, 0, 0, 0.75);}
.container {  margin: 10% auto;  text-align: center;}
div > span {  display: inline-block;}
.horizontal {  display: inline-block;  position: relative;  top: .1em;  width: 15%;}
.bubble {  display: inline-block;  padding: 1em;  transition: all 0.3s ease-in-out;  position: relative;}
.bubble:before {  content:'';  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;  background-size: contain;  transition: all 0.3s ease-in-out;  height: 100%;  width: 100%;  position: absolute;  top: 0; left: 0;}
.bubble:hover {  transform: scale(1.5);  margin: 0 10px;}
.bubble:hover::before {  transform: rotate(-90deg);}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/><div class="container">  <div class="bubble">    <span class="fa fa-inverse fa-google fa-fw fa-lg"></span>  </div>  <hr class="horizontal">  <div class="bubble">    <span class="fa fa-inverse fa-facebook fa-fw fa-lg"></span>  </div>  <hr class="horizontal">  <div class="bubble">    <span class="fa fa-inverse fa-twitter fa-fw fa-lg"></span>  </div>  <hr class="horizontal">  <div class="bubble">    <span class="fa fa-inverse fa-github fa-fw fa-lg"></span>  </div></div>

transform3d' not working with position: fixed children

This is because the transform creates a new local coordinate system, as per W3C spec:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

There's not currently a work-around that I'm aware of.

It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.

Transform scale keeps the original space around the scaled element

A brutal way would be to virtually reduce space needed by element.

Your example shows a known width & height, so it makes it easy. else you would need a javascript method.

.box_1 {
    width:  300px;
    height: 300px;
    transform: scale(0.5);
    transform-origin: left top;
  margin-bottom:-150px;
  margin-right:-150px;
}

https://jsfiddle.net/0bc4sxk3/1/

Scaling up would mean positive margins.

Transform only happens at screen, elements still use initial room and place needed in the flow of the document.

Using CSS transform scale maintains original positioning

In short, no, there is no CSS way of positioning based on the scaled value that I know of.

I do, however, know how you could compensate (without using any javascript) using a work around. You can use a translateX(-25%) in addition to the scale to position all of them next to each other. With that being said, the percents have to increase per element to compensate for the other being moved. This means that you have to use a set number of elements or perhaps a pre-processor to compensate

.img:nth-child(1) {
    transform: scale(.8);
}
.img:nth-child(2) {
    transform: scale(.8) translateX(-25%);
}
.img:nth-child(3) {
    transform: scale(.8) translateX(-50%);
}
.img:nth-child(4) {
    transform: scale(.8) translateX(-75%);
}
.img:nth-child(5) {
    transform: scale(.8) translateX(-100%);
}
img {
    float: left;
    transform-origin: top left;
}

Demo

CSS: Wrong Position of "Transform: Scale();" Container Children