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>

Matrix cooridinates hesaplanırken bkz: daha fazla bilgi için

http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Bach Vlogs

    Bach Vlogs

    18 HAZİRAN 2011
  • Lupe Fiasco

    Lupe Fiasco

    23 ŞUBAT 2006
  • tunez4you

    tunez4you

    20 EKİM 2008