CSS3 skew problemi

Arkadaşlar .box adında bir divim var içerisinde bir h1 var .box divini transform ile skew ettiriyorum ama içerisindeki h1 de skew oluyor, bunu nasıl engellerim ? Kodlarım;

Not : Daha doğrusu .box içerisine yaptığım transform h1'i etkilemesin.

html

<div class="box"><h1>HAKKIMIZDA</h1></div>

css

.box {
	width:200px;
	height:50px;
	background:#c03;
	margin:400px;
	-webkit-transform:skew(10deg);
}
.box h1 {
	color:#fff;
	font:24px "Myriad Pro";
	padding-top:10px;
}

Normalde bunun yöntemi yok gibi bir şey fakat;

            .box h1 {
                color: #fff;
                font: 24px "Myriad Pro";
                padding-top: 10px;
                -webkit-transform: skew(-10deg);
            }

Şeklinde yaparsan sorun düzelir.
Yani ne yazdıysan etkilenmesini istemediğin yerlere eksi değerini yazacaksın.

Harika.Tam bir nokta atışı yaptınız hocam tam da istediğim buydu çok teşekkür ederim

Rica ederim.
Kolay gelsin