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

  • Matt Harding

    Matt Harding

    23 Mayıs 2006
  • metagamers

    metagamers

    13 Mayıs 2006
  • Palmundo Ec

    Palmundo Ec

    11 HAZİRAN 2009