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

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

51 голосов
/ 12 февраля 2010

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

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

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

Ответы [ 6 ]

37 голосов
/ 12 февраля 2010

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

30 голосов
/ 12 февраля 2010

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

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

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

2 голосов
/ 17 мая 2013

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

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

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

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

JS Fiddle Demo

1 голос
/ 01 марта 2014 
<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>
1 голос
/ 17 марта 2010

Вы можете добавить преобразования в 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>
1 голос
/ 23 февраля 2010

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...