css 3d rotation and enlarge object - html

Question

I try to rotate the image and enlarge it (preferably to display in the center of the screen) but it does not work.
The second problem is that when an object grows, it is under other objects (z-index does not help).
Any one can help?
.flip-container {
-webkit-perspective: 1000;
}
.flipped {
-webkit-transform: scale(2);
-webkit-transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 350px;
height: 230px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
position: absolute;
}
.front {
z-index: -1;
}
.back {
-webkit-transform: rotateY(180deg);
}
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
<img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="back">
Wszystko za darmo
</div>
</div>
</div>

Answer 1

You can not set 2 transforms like this
transform: scale(2);
transform: rotateY(180deg);
As they are the same property, one will overwrite the other.
instead, concatenate the values
transform: scale(2) rotateY(180deg);
.beneath {
width: 350px;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
}
.txt {
height: 25px;
}
.beneath p {
float: left;
}
.beneath img {
width: 100%;
}
.flip-container img {
width: 100%;
}
.flipped {
transform-origin: center center;
transform: rotateY(180deg) scale(2);
}
.flip-container,
.flipper,
.front,
.back {
width: 350px;
height: 230px;
position: absolute;
top: 0;
left: 0;
}
.flipper {
transition: 0.6s;
}
.front,
.back {
backface-visibility: hidden;
}
.front {
z-index: 1;
}
.back {
transform: rotateY(180deg);
}
<!-- elements beneath - example only -->
<div class="beneath txt">
<p>This is all beneath.</p>
</div>
<div class="beneath">
<img src="http://via.placeholder.com/350x150" />
</div>
<!-- Original -->
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
<img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="back">
Wszystko za darmo
</div>
</div>
</div>

Answer 2

I'm lost on why it's not working for you. I've adjusted some of the code, but without extensive code, it's hard to determine what might be causing your issues.
I did notice you had a z-index of -1. I'm guessing since you said it didn't make a difference, it's a leftover from trial-and-error.
I took out relative positions, relocated your absolute position, and fixed your z-index.
From what I can tell, it's working. There may be deeper issues in your code.
.beneath {
width: 350px;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
}
.txt {
height: 25px;
}
.beneath p {
float: left;
}
.beneath img {
width: 100%;
}
.flip-container img {
width: 100%;
}
.flipped {
-webkit-transform: scale(2);
-webkit-transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 350px;
height: 230px;
position: absolute;
top: 0;
left: 0;
}
.flipper {
-webkit-transition: 0.6s;
}
.front,
.back {
-webkit-backface-visibility: hidden;
}
.front {
z-index: 1;
}
.back {
-webkit-transform: rotateY(180deg);
}
<!-- elements beneath - example only -->
<div class="beneath txt">
<p>This is all beneath.</p>
</div>
<div class="beneath">
<img src="http://via.placeholder.com/350x150" />
</div>
<!-- Original -->
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
<img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="back">
Wszystko za darmo
</div>
</div>
</div>