Girar a través de la página web de código?
https://stackoverflow.com/questions/2248865
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo la esperanza de que hay una forma relativamente sencilla para rotar una página web un poco, de 30 grados o menos, mientras que se deja es totalmente funcional y usable.
Estoy completamente de control de la página, y se puede modificar para hacer esto más fácil, si es necesario.Yo prefiero no volver a escribir toda la cosa, en SVG, aunque, pero, quizás, javascript y canvas va a trabajar?
Hay una manera de usar CSS, Javascript, o algún otro navegador cruz método que me permitiera lograr esto?
Solución
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 para -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);
}
La página de prueba ejemplo:
<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 las matrices cooridinates ver:
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
Otros consejos
Hey Adam, esto va a manejar la situación si hay nuevas versiones de Firefox y Safari:
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
Para Internet Explorer se puede mirar en algo así como Transformice , o leer la documentación de la filtro de matriz para IE.
Para girar toda la página web puede utilizar jQuery Tránsito y hacer algo como esto:
$("body").transition({rotate: "30deg"}, 6000);
O si usted quiere que sea de inmediato estática se puede hacer esto:
$("body").css({rotate: "30deg"});
JS violín demostración
Usted puede encontrar una svg solución aquí:
Y este es el mismo en puro css (en este momento sólo funciona en webkit basado en los navegadores, aunque):
Puede agregar transformaciones a HTML usando SVG y una <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>
<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 complete las direcciones URL de los enlaces. Por supuesto, también debe actualizar la altura y la anchura de los atributos para adaptarse a su sitio.
Si sólo desea cuatro imágenes para rotar, a continuación, sólo tiene que borrar una de las líneas de artículos. Si desea agregar uno, y luego copiar y pegar y artículos de actualización [5] a los elementos [6] y así sucesivamente.
Entonces habrá sentado las bases para la adición de este rotador de la imagen a su sitio. Pero hay un paso más que hay que hacer para sus imágenes que aparecen en la página. Averiguar dónde desea que las imágenes aparezcan en la página y copiar en:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
