Повернуть веб-страницу через код?

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

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

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

Ответы

Ответ 1

Здесь другое решение, основанное на матричном фильтре, который работает в 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>

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

JS Fiddle Demo

Ответ 5

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

Ответ 6

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