Поворот веб-страницы с помощью кода?


Я надеюсь, что есть относительно простой способ повернуть веб-страницу немного, на 30 градусов или около того, все еще оставляя ее полностью функциональной и полезной.

Я полностью контролирую страницу и могу изменить ее, чтобы сделать это проще, если это необходимо. Я бы предпочел не переписывать все это в SVG, но, возможно, javascript и canvas будут работать?

есть ли способ использовать CSS, Javascript или какой-либо другой метод кросс-браузера, который позволил бы мне выполнить это?

6   51   2010-02-12 03:37:08

6 ответов:

вот еще одно решение, основанное на матричном фильтре, который работает в IE.

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

css для -30 градусов будет:

.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);
}

пример тестовой страницы:

<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>

для получения дополнительной информации о вычислении матрицы cooridinates смотрите:

http://msdn.microsoft.com/en-us/library/ms533014(против.85).аспн http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2

Эй Адам, это будет обрабатывать его для более новых версий Firefox и Safari:

body {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}

для Internet Explorer вы можете посмотреть что-то вроде Transformie, или прочитайте документацию к матрица фильтра для IE.

чтобы повернуть всю веб-страницу, вы можете использовать jQuery Transit и сделать что-то вроде этого:

$("body").transition({rotate: "30deg"}, 6000);

или если вы хотите, чтобы он был немедленно статическим, вы можете сделать это:

$("body").css({rotate: "30deg"});

JS Fiddle Demo

вы можете найти решение svg здесь:

http://simulacrum.dorm.duke.edu/allyourgoogle.svg

и это то же самое в чистом css (в настоящее время работает только в браузерах на основе webkit):

http://a.qoid.us/google.html

вы можете добавить преобразования в HTML с помощью SVG и A <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>

На первый взгляд этот код может показаться пугающим. Однако все, что вам нужно сделать, это обновить путь к файлам изображений и заполнить URL-адреса для ссылок. Конечно, вы также должны обновить атрибуты высоты и ширины, чтобы соответствовать ваш сайт.

Если вы хотите вращать только четыре изображения, просто удалите одну из строк элемента. Если вы хотите добавить один, то скопируйте и вставьте и обновите элементы [5] в элементы[6] и так далее.

теперь вы заложили основу для работы добавление этого ротатора изображений на ваш сайт. Но есть еще один шаг, который вам нужно сделать, чтобы ваши изображения появились на странице. Выяснить, где вы хотите, чтобы изображения появились на странице и скопировать в:

<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>