'Deitar' imagem no CSS

[Raul Claudino 0]

.celular{
   background:url(http://www.cmswire.com/images/ios7_apple_iphone.jpg);
}

.tela{
   /* o que fazer??? */
}

 

<div class="celular">
  <img class="tela" src="http://img.wonderhowto.com/img/08/98/63507337428653/0/mimic-new-ios-7-look-ios-6-your-jailbroken-iphone.w654.jpg" alt="">
</div>

http://www.cmswire.com/images/ios7_apple_iphone.jpghttp://img.wonderhowto.com/img/08/98/63507337428653/0/mimic-new-ios-7-look-ios-6-your-jailbroken-iphone.w654.jpg

 

 

Pessoal,

peguei essas imagens da internet pra simplificar,

eu quero rotacionar a .tela pra ficar igual a tela do .celular.

Como se o .celular fosse a "muldura" e a .tela fosse o "retrato".

Estou tentando usar RotateX, Y, Z, no CSS mas não tá ficando igual, é possivel fazer isso?

Se sim, o que devo usar?

 

[Rafael Melo 1]

Acho que voce quer o "skew", coloca esse código na .tela

 

-webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    transform: skew(-45deg);

[Ruan Aragão 1]

Tente usar matrix()to sem tempo para ver direto, mas fiz um teste.

HTML

<div class="celular">
  <div class="img">
    <img class="tela" src="http://img.wonderhowto.com/img/08/98/63507337428653/0/mimic-new-ios-7-look-ios-6-your-jailbroken-iphone.w654.jpg" alt="">
  </div>
</div>

 

CSS

.celular{
   background:url(http://www.cmswire.com/images/ios7_apple_iphone.jpg);
  width: 600px;
  height: 400px;
}
.img {
  position: relative;
  -webkit-transform:matrix(1.5,1,-2.38,1.50,359,346);
}
.tela{
  width: 120px;
  height: 130px;
  position: relative;
  
}

Veja: http://jsbin.com/gihaz/1/edit

 

 

Tente melhorar o código.

[Raul Claudino 0]

obrigado galera, ajudou muito :yes: