javascript - bloquear - Girar página web a través de código?
bloquear portrait css (6)
Aquí hay otra solución basada en el filtro de matriz que funciona en IE.
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
El css de -30 grados sería:
.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);
}
Ejemplo de página de prueba:
<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>
Para obtener más información sobre el cálculo de la matriz cooridinates, consulte:
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
Espero que haya una manera relativamente simple de rotar una página web un poco, 30 grados más o menos, sin dejar de ser completamente funcional y utilizable.
Controlo completamente la página y puedo modificarla para facilitar esto si es necesario. Preferiría no volver a escribir todo en SVG, pero quizás javascript y canvas funcionen.
¿Hay alguna forma de usar CSS, Javascript o algún otro método de navegador cruzado que me permita lograr esto?
Hola Adam, esto lo manejará para versiones más nuevas de Firefox y Safari:
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
Para Internet Explorer puede buscar algo así como Transformie , o leer la documentación del http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx para IE.
Para rotar la página web completa, puede usar jQuery Transit y hacer algo como esto:
$("body").transition({rotate: "30deg"}, 6000);
O si quiere que sea inmediatamente estático, puede hacer esto:
$("body").css({rotate: "30deg"});
Demostración de JS Fiddle
Puede agregar transformaciones a HTML usando SVG y 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://.com" style="width:700px;height:700px"></iframe>
</body>
</foreignObject>
</g>
</svg>
Puede encontrar una solución svg aquí:
Y esto es lo mismo en pure css (en este momento solo funciona en navegadores basados en webkit):
<script language="JavaScript1.2">
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
items[0]="<a href=''link.htm'' ><img alt=''image0 (9K)'' src='' /Images/image0.jpg'' height=''300'' width=''300'' border=''0'' /></a>"; //a linked image
items[1]="<a href=''link.htm''><img alt=''image1 (9K)'' src=''/Images/image1.jpg'' height=''300'' width=''300'' border=''0'' /></a>"; //a linked image
items[2]="<a href=''link.htm''><img alt=''image2 (9K)'' src=''/Images/image2.jpg'' height=''300'' width=''300'' border=''0'' /></a>"; //a linked image
items[3]="<a href=''link.htm''><img alt=''image3 (9K)'' src=''/Images/image3.jpg'' height=''300'' width=''300'' border=''0'' /></a>"; //a linked image
items[4]="<a href=''link.htm''><img alt=''image4 (9K)'' src=''/Images/image4.jpg'' height=''300'' width=''300'' border=''0'' /></a>"; //a linked image
items[5]="<a href=''link.htm''><img alt=''image5 (18K)'' src=''/Images/image5.jpg'' height=''300'' width=''300'' border=''0'' /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}
function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items[current]);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
if(document.all)
placeholderdiv.innerHTML=items[current];
current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>
A primera vista, este código puede parecer intimidante. Sin embargo, todo lo que tiene que hacer es actualizar la ruta a los archivos de imagen y completar las URL de los enlaces. Por supuesto, también debe actualizar los atributos de alto y ancho para adaptarse a su sitio.
Si solo desea rotar cuatro imágenes, simplemente elimine una de las filas de elementos. Si desea agregar uno, copie y pegue y actualice los elementos [5] a los elementos [6] y así sucesivamente.
Ahora ha sentado las bases para agregar este rotador de imagen a su sitio. Pero hay un paso más que debe hacer para que sus imágenes aparezcan en la página. Averigua dónde quieres que aparezcan las imágenes en la página y copia en:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>