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

  • Glove and Boots

    Glove and Bo

    1 ŞUBAT 2007
  • Hak5DarrensVlog

    Hak5DarrensV

    11 EYLÜL 2009
  • TotalSeminarsChannel

    TotalSeminar

    16 Mart 2010