Повернуть веб-страницу с помощью кода?
Я надеюсь, что существует относительно простой способ повернуть веб-страницу немного, приблизительно 30 градусов, все еще оставляя это полностью функциональным и применимым.
Я полностью управляю страницей и могу изменить ее для создания этого легче в случае необходимости. Я не переписал бы все это в SVG, тем не менее, но возможно JavaScript и холст будут работать?
Существует ли способ использовать CSS, JavaScript или некоторый другой перекрестный метод браузера, который позволил бы мне выполнять это?
4 ответа
Вот еще одно решение, основанное на матричном фильтре, который работает в 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
Привет, Адам, это справится с новыми версиями Firefox и Safari:
body {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
Для Internet Explorer вы можете посмотреть что-то вроде Transformie или прочтите документацию по матричному фильтру для IE.
Вы можете найти решение svg здесь:
То же самое и в чистом css (в настоящее время работает только в браузерах на основе webkit):
Вы можете добавлять преобразования в HTML с помощью SVG и
<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>