Если у меня есть два одинаковых элемента, один масштабируется до 2x, как уменьшить его внутренний элемент и поместить его там, где он будет в 1x?

Question

У меня есть два одинаковых элемента. Верхний, я масштабируюсь, чтобы удвоить размер, а затем центрироваться по нормальному размеру. Я хочу, чтобы его внутренний элемент затем был уменьшен до нормального размера и размещен точно там, где размещен внутренний элемент элемента нормального размера.

Это кажется невозможным. Кажется, нет никакой логики в масштабировании + перевода позиции.

Как мне это сделать?

https://jsfiddle.net/0urdrvao/

HTML:

<div class="top"> 
    <div class="inner"> 
    Inner 
    </div> 
</div> 

<div class="bottom"> 
    <div class="inner"> 
    Inner 
    </div> 
</div> 

CSS:

body, html 
{ 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.top, 
.bottom 
{ 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 300px; 
    height: 300px; 
    background-color: gray; 
    z-index: 0; 
} 

.top 
{ 
    position: fixed; 
    transform-origin: 0 0 0; 
    transform: translate(-150px, -150px) scale(2); 
    opacity: .5; 
    z-index: 1; 
} 

.inner 
{ 
    position: relative; 
    top: 20vh; 
    left: 0px; 
    width: 100px; 
    height: 40px; 
    background-color: red; 
} 

.top .inner 
{ 
    /* This doesn't work */ 
    transform: translate(150px,150px) scale(.5); 
    /* This also doesn't work (doing half)*/ 
    /*transform: translate(75px,75px) scale(.5);*/ 
    /* This also doesn't work (doing double)*/ 
    /*transform: translate(300px,300px) scale(.5);*/ 
    transoform-origin: 0 0 0; 
    background-color: yellow; 
} 

Answer 1

Поскольку top: 20vh будет масштабироваться раз 2, преобразование, происхождение должно быть 0 -20vh.

При обратном масштаб/переводить вам нужно идти назад и начать с масштабом, а затем перевести

.top{ 
    position: fixed; 
    transform-origin: 0 0; 
    transform: translate(-150px, -150px) scale(2); 
    opacity: .5; 
    z-index: 1; 
} 

.top .inner{ 
    transform: scale(.5) translate(150px, 150px); 
    transform-origin: 0 -20vh; 
    background-color: yellow; 
} 

Updated fiddle

Или можно сделать так, устанавливая происхождение 0 0 и transform: scale(.5) translate(150px,150px) translateY(-20vh);

Updated fiddle