CSS Transform Skew

Transform skew without changing element position

You need transform-origin: bottom

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  transform-origin: bottom;
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

CSS transform skew only top side

You are almost there. Consider a pseudo element to be able to hide the bottom part using overflow:hidden

.door {
  width: 100px;
  height: 160px;
  display: grid;
  border-radius: 10px;
  overflow:hidden;    
  transform-origin: bottom;
  transform: skewX(-4deg);
}
.door:before {
  content:"";
  background-image: linear-gradient(180deg, #234dbc, #b84295);
  border-radius: inherit;
  transform: skewY(17deg);
  transform-origin: bottom left;
  background-size: 200% 200%;
  animation: Animation 5s ease infinite;
}

@keyframes Animation {
  50% {
    background-position: 90% 100%
  }
}

<div class="door"></div>

Skew an HTML element in the Z direction

Actually, there is not the possibility to set simply a skewZ, because it is harder than that.

The skew that you already know, are 2D transforms. What they really are, is skewX (for the Y axis), and skewY (for the X axis).

When going 3D, you would have

skewX for Y
skewX for Z
skewY for X
skewY for Z
skewZ for X
skewZ for Y

Not so easy !

There are 2 ways to get some skewZ.

First, using a rotation, as you already commented. Just rememeber to unset it:

transform: rotateX(90deg) skewX(10deg) rotateX(-90deg)

The other one is to use a transform matrix . This is a matrix with the clasicals skews

1          skewY      0        0
skewX         1       0        0
0             0       1        0
0             0       0        1

And this is a matrix with the Z skews

1             0      skewZ/x        0
0             1      skewZ/y        0
0             0       1             0
0             0       0             1

Transform - Skew anchor tag background only

You can skew the text back. Since transform doesn't work on non block elements, and a is an inline tag, you need to change the a tag display to inline-block or block:

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  display: inline-block;
  transform: skewX(59deg);
}

<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

CSS: Is there a way to use the transform skew property on a specific div without affecting child elements?

You can negate the skewing on the child element

#skew-left p {
    transform: skewX(-45deg);
}

Reposition them afterwards as necessary.

CSS Transform - Rotate & Skew doesn't work together

As I explained in another answer (Simulating transform-origin using translate). The multiplication is done from left to right but the visual effect is from right to left:

.test { width: 192px; height: 144px; transform:rotate(25deg)  skewX(-40deg) ; display: block; background-color: red; top:50px; left:50px; position:absolute;}

<div class="test"></div>

How to transform skew only towards bottom corners?

You can start with something like this, clean and simple without multiple divs.

#trapezium {  width: 200px;  height: 100px;  margin: 50px;  transform: perspective(100px) rotateX(-45deg);  background-color: gray;}

<div id='trapezium'></div>

skew() function in depth

The mathematical operation that is applied on the <angle> is simply tan(<angle>). It is then inserted in the transformation Matrix.

Ok, that doesn't really goes in depth about skew, nor why it makes sense to use angle rather than a numeric factor. So let's take the following ASCII example showing an x only skew.

   skewX(0)            skewX(45deg)
_|         |_         _|         |_ => original box markers
  a o o o o         a o o o o    
  b o o o o           b o o o o
  c o x o o             c o x o o   <-- this line didn't move
  d o o o o               d o o o o
  e o o o z                 e o o o z
 |         |           |         |

So if we apply the tan(45deg) it gives us a skewX factor of 1.

This means that all the horizontal lines will get displaced by 1 * their distance to the transformation origin.

In above example the transformation origin is the center (x) of the 5*5 image.

So the first pixel line (a o o o o) being at a distance of minus two pixels from the origin, it will get translated by 2px on the left.

The last line (e o o o z) being at +2px from the origin, it will get translated by 2px on the right.

The middle line (c o x o o) being on the origin will not be affected by this transform.

Alright, but that still doesn't explain why bother with angles rather than a factor...

Well the angle notation makes sense too, since we could also explain our example as we rotated every column by 45deg using their center point as anchor.

And even if it is just speculations from my part, angles have the added benefit to allow a skewN(90deg) state which couldn't be represented by a numeric factor.