...
PDA

CSS Transform skew()

Sammy12
02-02-2012, 03:52 AM
When I use this, it also rotates the text. Is there anyway I could prevent this without separating the elements for a skew and text.
coothead
02-02-2012, 11:15 AM
Hi there Sammy12,

try it like this...


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

<title>skew and unskew</title>

<style type="text/css">
body {
background-color:#f0f0f0;
}
#container {
width:630px;
margin:20px auto;
}
#box {
width:560px;
padding:20px;
background-color:#eef;
box-shadow:#333 10px 10px 20px;
-moz-transform:skewx(10deg) translatex(0);
-moz-transform-origin:bottom left;
-moz-perspective:75;
-moz-perspective-origin:10% 75%;
-webkit-transform:skewx(10deg) translatex(0);
-webkit-transform-origin:bottom left;
-webkit-perspective:75;
-webkit-perspective-origin:10% 75%;
-o-transform:skewx(10deg) translatex(0);
-o-transform-origin:bottom left;
-o-perspective:75;
-o-perspective-origin:10% 75%;
-ms-transform:skewx(10deg) translatex(0);
-s-transform-origin:bottom left;
-ms-perspective:75;
-ms-perspective-origin:10% 75%;
}
#text {
width:460px;
padding:20px;
margin:0;
background-color:#fff;
box-shadow:#333 5px 5px 10px;
-moz-transform:skewx(-10deg) translatex(0);
-moz-transform-origin:bottom left;
-moz-perspective:75;
-moz-perspective-origin:10% 75%;
-webkit-transform:skewx(-10deg) translatex(0);
-webkit-transform-origin:bottom left;
-webkit-perspective:75;
-webkit-perspective-origin:10% 75%;
-o-transform:skewx(-10deg) translatex(0);
-o-transform-origin:bottom left;
-o-perspective:75;
-o-perspective-origin:10% 75%;
-ms-transform:skewx(-10deg) translatex(0);
-ms-transform-origin:bottom left;
-ms-perspective:75;
-ms-perspective-origin:10% 75%;
}
</style>

</head>
<body>

<div id="container">

<div id="box">

<p id="text">
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.
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><!-- end #text -->

</div><!-- end #box -->

</div><!-- end #container -->

</body>
</html>

coothead
Sammy12
02-02-2012, 06:04 PM
Thanks so much! For some reason I did this earlier, and it didn't work.
coothead
02-02-2012, 06:08 PM
No problem, you're very welcome. ;)
coothead

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum