Simply Cutting Edge
Welcome Guest [Log In] [Register]
Welcome to zetaNetwork. We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as viewing zetaNetwork exclusive tutorials and articles, and access to our code snippets section. Registration is simple, fast, and completely free.


Click Here To Register


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Underground CSS: Transformations
Topic Started: Apr 14 2011, 05:49 PM (8,592 Views)
Pro
Member Avatar
Underground Coding

Note: These transitions have been coded for Google Chrome and Safari only. This tutorial will also require a higher knowledge of thinking and perspective. Such as being able to think in x, y, and z coordinates.


Previously:

This is the 4th installment to the Underground CSS series.

Part 1 - Gradients
Part 2 - Multiple Background Images
Part 3 - Transitions



Example:

Example - Here

Code: Source
 

<style>
#transform, #transform div {
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-property: all;
-moz-transition-duration: 0.3s;
-o-transition-property: all;
-o-transition-duration: 0.3s;
transition-property: all;
transition-duration: 0.3s;
}

#transform {
font-weight: strong;
font-size: 30px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#ffffff), color-stop(100%,#F2F2F2));
background: -moz-linear-gradient(top, #ffffff 75%, #F2F2F2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
padding: 15px 30px;
border: 1px solid #000;
box-shadow: 0px 0px 5px #000;
}

#transform:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#1F1F1F));
background: -moz-linear-gradient(top, #fff, #ededed);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#ededed');
padding: 30px 20px;
border: 5px solid #000;
box-shadow: 0px 0px 15px #000, inset 0px 0px 20px #000;
border-radius: 25px;
}

#transform div {
-webkit-perspective: 1500;
-webkit-transform-style: preserve-3d;
-webkit-transition-duration: 1s;
}

#transform div:hover {
zoom: 2;
color: #fff;
text-shadow: 1px 1px 1px #fff;
}

#x:hover {
-webkit-transform: rotateX(180deg);
}

#y:hover {
-webkit-transform: rotateY(180deg);
}

#rotate:hover {
-webkit-transform: rotate(360deg);

}

#trans:hover {
-webkit-transform: translate(100px, 0px);
}
</style>

<div id="transform">
<div id="x">Hover Over Me</div>
<br />
<div id="y">Hover Over Me</div>
<br />
<div id="rotate">Hover Over Me</div>
<br />
<div id="trans">Hover Over Me</div>
</div>




The Breakdown:

First off we need an HTML base to work off of. Like this:

Code: HTML
 

<div id="transform">
<div id="x">Hover Over Me</div>
<br />
<div id="y">Hover Over Me</div>
<br />
<div id="rotate">Hover Over Me</div>
<br />
<div id="trans">Hover Over Me</div>
</div>


The div transform will serve as our content container while its children will be what we will be transforming.

Setting Up The CSS:

Now you need to make sure that each transformation is animated, otherwise, what's the fun of transforming stuff in the first place?

Use the transition properties from the last tutorial to make sure each transformation animates. I would suggest setting the property to all and using a speed of 0.2s-1.5s in order to ensure a clean transformation.

Code:
 

#transform, #transform div {
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-property: all;
-moz-transition-duration: 0.3s;
-o-transition-property: all;
-o-transition-duration: 0.3s;
transition-property: all;
transition-duration: 0.3s;
}



Snippet Breakdown:
See the tutorial on transitions.


Both the transformation container and each child div is given the transformation property so that they will all animate, also so we can style it to refresh your memory about transitions.

Now let's style the container so that it won't look all bland.

Code:
 

#transform {
font-weight: strong;
font-size: 30px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#ffffff), color-stop(100%,#F2F2F2));
background: -moz-linear-gradient(top, #ffffff 75%, #F2F2F2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
padding: 15px 30px;
border: 1px solid #000;
box-shadow: 0px 0px 5px #000;
}



Snippet Breakdown:
Code:
 

background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#ffffff), color-stop(100%,#F2F2F2));
background: -moz-linear-gradient(top, #ffffff 75%, #F2F2F2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');

See the tutorial on gradients.


Now for the container hover:

Code:
 

#transform:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#1F1F1F));
background: -moz-linear-gradient(top, #fff, #ededed);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#ededed');
padding: 30px 20px;
border: 5px solid #000;
box-shadow: 0px 0px 15px #000, inset 0px 0px 20px #000;
border-radius: 25px;
}



Snippet Breakdown:
Code:
 

background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#ffffff), color-stop(100%,#F2F2F2));
background: -moz-linear-gradient(top, #ffffff 75%, #F2F2F2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F2F2F2');

See the tutorial on gradients.


Since the transformation container is now done, we can go ahead and apply our transitions to each child div.


Code:
 

#transform div {
-webkit-perspective: 1500;
-webkit-transform-style: preserve-3d;
-webkit-transition-duration: 1s;
}



Snippet Breakdown:

Code:
 

-webkit-perspective: 1500;


Adds depth to the element during the transformation.

Code:
 

-webkit-transform-style: preserve-3d;


There are two possible values for this property.

  • flat: The element is flattened onto the same plane as its parent element.
  • preserve-3d: The element is set in a 3d space with its parent element.


Code:
 

-webkit-transition-duration: 1s;


See the tutorial on transitions.


Now we add a general styling to each child div of the main container when they are hovered.

Code:
 

#transform div:hover {
zoom: 2;
color: #fff;
text-shadow: 1px 1px 1px #fff;
}



Snippet Breakdown:
Code:
 

zoom: 2;


The zoom level for an element and all its children. For example, 2 would mean the element is magnified in size by 200%.


Now it's time to add the transformations themselves.

Code:
 

#x:hover {
-webkit-transform: rotateX(180deg);
}



Snippet Breakdown:
Code:
 

-webkit-transform: rotateX(180deg);


The x-rotation for the specified element to rotate. This type of rotation occurs on the x-axis of the parent element.


Code:
 

#y:hover {
-webkit-transform: rotateY(180deg);
}



Snippet Breakdown:
Code:
 

-webkit-transform: rotateY(180deg);


The y-rotation for the specified element to rotate. This type of rotation occurs on the y-axis of the element.


Code:
 

#rotate:hover {
-webkit-transform: rotate(360deg);
}



Snippet Breakdown:
Code:
 

-webkit-transform: rotate(360deg);


The number of degrees for the element to rotate. This type of rotation occurs about the origin of the parent element, in layman's terms, the center of the container.


Code:
 

#trans:hover {
-webkit-transform: translate(100px, 0px);
}



Snippet Breakdown:
Code:
 

-webkit-transform: translate(100px, 0px);


The number of pixels, em, etc for the element to translate from its original location. This type of transformation is based on an x,y coordinate system where 0 is the center of the element being transformed.


There's more to this to feel free to ask any questions you may have and I will do my best to answer them.
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Quozzo
Member Avatar
Do not fear death for death does not fear you.

Do you know that all your links in the tut go to Outline?
Posted Image
Offline Profile Quote ^
 
Pro
Member Avatar
Underground Coding

Yeah, this was originally posted on Outline by me. I never bothered to change them.
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Pando
Member Avatar


For the 2D transforms (rotate and translate) FF4, Opera, and IE9 have implemented support and require -moz-, -o-, and -ms- prefixes respectively (best to include a prefix-free one).

Also, there are 2 more, scale and skew.

The scale scales the element. Examples:
Code:
 
transform:scale(5); /* Element is 5X bigger */
transform:scale(3, 5); /* Element is 3X bigger on the X axis, 5X on the Y Axis */
transform:scaleX(3); /* Element is 3X bigger on the X Axis */
transform:scaleY(5); /* Element is 5X bigger on the Y Axis */

Skew allows you to skew the element, something only able to be done in Photoshop before. Examples:
Code:
 
transform:skew(5deg); /* Element is skewed 5 degrees on the X axis */
transform:skew(3deg, 5deg); /* Element is skewed 3 degrees on the X axis, 5 degrees on the Y axis */
transform:skewX(3deg); /* Element is skewed 3 degrees on the X axis, but is redundant as it skews on the X axis if it's just skew */
transform:scaleY(5deg); /* Element is skewed 5 degrees on the Y axis */

Multiple transforms:
Code:
 
transform:translate(50px, -100px) skewY(15deg) rotate(-45deg) scale(2);
Offline Profile Quote ^
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Tutorials · Next Topic »
Add Reply