Kod ile web sayfası döndürmek?

SORU

12 ŞUBAT 2010, Cuma

Kod ile web sayfası döndürmek?

Hala tam olarak işlevsel ve kullanışlı bırakarak, bir web sayfası biraz, 30 derece kadar döndürmek için nispeten basit bir yolu vardır diye umuyorum.

Ben tamamen sayfayı kontrol ve gerekirse bu daha kolay hale getirmek için değiştirebilirsiniz. Yeniden yazmak SVG şey söylememeyi tercih ederim, ama belki de javascript ve canvas çalışır mı?

Bir şekilde CSS, Javascript, ya da bana bunu yapmak için izin verecek başka bir çapraz tarayıcı yöntemi kullanan var mı?

CEVAP

12 ŞUBAT 2010, Cuma

İşte IE çalışır başka bir çözüm matrisi filtresi dayalı.

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

-30 derecede css:

.rotate
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
  -moz-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
  -webkit-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
  -o-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}

Test sayfası örneği:

<html>
  <head>
    <style type="text/css" media="screen">
    body {
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
      -moz-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
      -webkit-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
      -o-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
    }
    </style>
  </head>
  <body>
    <p>Testing</p>
    <p><a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">Matrix calculator here</a></p>
  </body>
</html>