Повернуть веб-страницу с помощью кода?
https://stackoverflow.com/questions/2248865
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я надеюсь, что существует относительно простой способ немного повернуть веб-страницу, на 30 градусов или около того, при этом оставив ее полностью функциональной и пригодной для использования.
Я полностью контролирую страницу и при необходимости могу изменить ее, чтобы упростить задачу.Я бы предпочел не переписывать все это в SVG, но, возможно, javascript и canvas будут работать?
Есть ли способ, используя CSS, Javascript или какой-либо другой кроссбраузерный метод, который позволил бы мне достичь этого?
Решение
Вот еще одно решение, основанное на матричном фильтре, который работает в 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 (ПРОТИВ 85).aspx 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 вы могли бы посмотреть на что-то вроде Трансформация, или ознакомьтесь с документацией по матричный фильтр для IE.
Чтобы повернуть всю веб-страницу, вы можете использовать jQuery Transit и сделать что-то вроде этого:
$("body").transition({rotate: "30deg"}, 6000);
Или, если вы хотите, чтобы он сразу же стал статичным, вы можете сделать это:
$("body").css({rotate: "30deg"});
Демо-версия JS Fiddle
Вы можете найти svg-решение здесь:
И это то же самое в чистом css (хотя на данный момент работает только в браузерах на основе webkit):
Вы можете добавлять преобразования в 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>
<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>
