Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property

When the web first started, back in 1990, it was based on simple HTML (HyperText Markup Language). It was used to send text and tabular data between universities and research institutes. I think it didn't even allow images until near the end of 1995 when HTML version 2.0 was released. But the general Internet developing public wanted to create fancy magazine-style webpages, so a year later CSS (Cascading Style Sheets) was released.

Today we're at CSS version 3, and although it's overly complicated and it takes a long - long time to master it, the power it gives you, as a designer, is amazing. And, although I hate to admit it because I'm so far behind schedule on my projects, sometimes I just toy around with CSS to see what it can do. That's what I was doing when I came up with this:

CSS3 Cube

The CSS3 transform property allows you to rotate, scale, move, and skew html elements. I've used transform:skew previously to slant text. I've seen many examples of transform:skew used to skew divs with colored backgrounds. But can it be used to skew a div with an image background? That seems unlikely because the code to manipulate a graphic to perform that function would be somewhat complicated.

But guess what - yes it can skew an image. On one hand, I'm amazed, but on the other hand, I think CSS has gone too far. Having these types of capabilities built-in to a web browser, in my opinion, makes it bloated and slow. But if you want to play around with it, here's the code:

<!Doctype html>
<html lang="en">
<head>

<style>
#top
{
background-image:url('butterfly.jpg');
position:absolute;
left:280px;
top:141px;
width:60px;
height:60px;
-ms-transform:skew(45deg,-45deg); /* IE 9 */
-webkit-transform:skew(45deg,-45deg);  /* Chrome, Safari, Opera */
transform:skew(45deg,-45deg);
}
#left
{
background-image:url('butterfly.jpg');
position:absolute;
left:250px;
top:200px;
width:60px;
height:60px;
-ms-transform:skew(0deg,45deg);
-webkit-transform:skew(0deg,45deg);
transform:skew(0deg,45deg);
}
#right
{
background-image:url('butterfly.jpg');
position:absolute;
left:309px;
top:200px;
width:60px;
height:60px;
-ms-transform:skew(0deg,45deg);
-webkit-transform:skew(0deg,45deg);
transform:skew(0deg,-45deg);
}
</style>

</head>
<body>

<div id="top"></div>

<div id="left"></div>

<div id="right"></div>

</body>
</html>

Note in the code that I used position:absolute; and then specified a left:, top:, width:, and height: location. Setting position to absolute takes the s out of flow, places them on their own layer, and explicitly position them. To position the divs to make a cube, you need to understand the layout of the screen, That is, Xpixel locations from from left-to right, Y pixel locations run from top to bottom. The syntax of the skew method is shown below.

transform:skew(Xdeg,Ydeg);



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268