J'espère qu'il existe un moyen relativement simple de faire pivoter une page Web de 30 degrés environ, tout en la laissant entièrement fonctionnelle et utilisable.
Je contrôle complètement la page et je peux la modifier pour faciliter les choses si nécessaire. Je préférerais ne pas tout réécrire en SVG, mais peut-être que javascript et canvas fonctionneront?
Existe-t-il un moyen d'utiliser CSS, Javascript ou une autre méthode multi-navigateurs qui me permettrait d'accomplir cela?
Voici une autre solution basée sur la matrice de filtre qui fonctionne sous IE.
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
Le css pour les -30 degrés serait:
.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);
}
Page de Test exemple:
<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>
Pour plus d'informations sur le calcul de la matrice cooridinates voir:
http://msdn.microsoft.com/en-us/library/ms533014(SV.85).aspx http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2
Salut Adam, cela va le gérer pour les nouvelles versions de Firefox et Safari:
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
Pour Internet Explorer, vous pouvez utiliser quelque chose comme Transformie ou lire la documentation du filtre matriciel pour Internet Explorer.
Pour faire pivoter toute la page Web, vous pouvez utiliser jQuery Transit et procéder comme suit:
$("body").transition({rotate: "30deg"}, 6000);
Ou si vous voulez qu'il soit immédiatement statique, vous pouvez le faire:
$("body").css({rotate: "30deg"});
Vous pouvez ajouter des transformations au HTML en utilisant SVG et un <foreignObject>
<svg xmlns = "http://www.w3.org/2000/svg">
<g transform="translate(300, 0) rotate(20)">
<foreignObject x="10" y="10" width="800" height="800">
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe src="http://stackoverflow.com" style="width:700px;height:700px"></iframe>
</body>
</foreignObject>
</g>
</svg>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
