|
Pro
|
Apr 14 2011, 05:49 PM
Post #1
|
Underground Coding
- Posts:
- 458
- Group:
- Admins
- Member
- #1
- Joined:
- Sep 5, 2010
- Favorite Browser
- Google Chrome
- HTML & CSS Proficiency
- 10
- JavaScript Proficiency
- 9
- PHP Proficiency
- 7
- Graphic Design Proficiency
- 5
- Forrst
- Pro
|
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; }
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.
|
|
Quozzo
|
Apr 26 2011, 07:35 PM
Post #2
|
|
Pro
|
Apr 26 2011, 08:32 PM
Post #3
|
|
Pando
|
Jun 6 2011, 11:33 PM
Post #4
|
- Posts:
- 215
- Group:
- Members
- Member
- #41
- Joined:
- Jun 4, 2011
- Favorite Browser
- Firefox
- HTML & CSS Proficiency
- 6
- Graphic Design Proficiency
- 5
|
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);
|