...

View Full Version : can page text run at angle other than horiz or vertical?



bazz
01-28-2012, 09:09 PM
Hi,

Imagine, if you will please, a page on a notice board hanging by one pin at the top left corner. The page is effectively at about 30 degrees from horizontal.

Can the text in a web page be made to sit at that angle? Is there a 'rotate' attribute or similar in css?

Maybe it needs to be done with javascript?

bazz

coothead
01-28-2012, 09:41 PM
Hi there bazz,

here is an example....



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>css3 transform</title>

<style type="text/css">
body {
background-color:#f0f0f0;
}
div {
width:700px;
padding:10px 20px;
margin-top:200px;
border:1px solid #333;
background-color:#fff;
box-shadow:#333 10px 10px 20px;

-moz-transform:translate(100px) rotate(20deg);
-moz-transform-origin:60% 100%;

-webkit-transform:translate(100px) rotate(20deg);
-webkit-transform-origin:60% 100%;

-o-transform:translate(100px) rotate(20deg);
-o-transform-origin:60% 100%;

-ms-transform:translate(100px) rotate(20deg);
-ms-transform-origin:60% 100%;

transform:translate(100px) rotate(20deg);
transform-origin:60% 100%;
}
</style>

</head>
<body>

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div>

</body>
</html>

This site...
http://caniuse.com/#search=transform
...will tell you which browsers now support it. ;)

Further reading:-
CSS3 transform (http://www.google.co.uk/search?q=css3+transform+-w3schools)
coothead

bazz
01-29-2012, 04:44 PM
Thank you coothead.

That's exactly what I need. :thumbsup:

bazz

coothead
01-29-2012, 04:52 PM
No problem, you're very welcome. ;)
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum