Left align skewed text in container - html

Question

I have to apply skew and rotate on an element. It works fine but the skewed text isn't left aligned in it's container (see the result image):
The text on the left is overflowing the container: the H (from "Hello") and the T (from "The") alignment is not right.
This is what I am trying to achieve:
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-bottom: 30px;
}
.skew-text {
-moz-transform: rotate(-10deg) skew(-30deg, 0deg);
-webkit-transform: rotate(-10deg) skew(-30deg, 0deg);
-o-transform: rotate(-10deg) skew(-30deg, 0deg);
-ms-transform: rotate(-10deg) skew(-30deg, 0deg);
transform: rotate(-10deg) skew(-30deg, 0deg);
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>

Answer 1

One way of aligning the skewed text on a vertical line is to manualy set a negative text-indent. This technique also requires to set a transform-origin on bottom left :
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-top: 30px;
}
.skew-text {
transform: rotate(-10deg) skew(-30deg, 0deg);
transform-origin: 0 100%;
text-indent: -15px;
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>
This technique works on text that wraps only on two lines. For text with more than 2 lines, you will need to wrap each line in a tag (like a <span>) :
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-top: 30px;
}
.skew-text span{
display:block;
transform: rotate(-10deg) skew(-30deg, 0deg);
transform-origin: 0 100%;
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">
<span>Hello Welcome to the</span>
<span>skewed text with</span>
<span>several lines many</span>
<span>many many lines</span>
</h1>
</div>
Note that you need to set the <span> to display:block because transforms don't apply on inline elements.

Answer 2

With rotation and skew you will get a behaviour like perspective so the oversizing is a result of that.
You need to manually scale down your skew-text and then disable the overflow of its container so you won't see any overlapping text.
That's the only idea for me to fix this.

Answer 3

It's hard to achieve the alignment if you use a rotation as transform.
Use a skew to get the inclined lines. You can (to some extent) get the angle on the letters using italics
Also, there is no need for all the vendor specific tranforms
.skew-parent-wrapper {
width: 300px;
margin-left: 100px;
margin-top: 50px;
border: 1px solid red;
padding-bottom: 30px;
}
.skew-text {
transform: skewY(-20deg);
font-style: italic;
background-color: goldenrod;
}
<div class="skew-parent-wrapper">
<h1 class="skew-text">Hello Welcome to the skewed text that can span several lines</h1>
</div>