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>