This is important because…
Being able to add dynamic visuals to engage the users attention leads to a favorable experience to them. Done tastefully also… and when called for / where it fits.
Allows new and different ways to size, position, and change elements in either 2D or 3D settings (with individual properties and values) thanks to CSS3 update.
Syntax is pretty straight forward; transform property keyword, followed by the transform type and then the amount in parenthesis, occasionally and to offer best support across browsers, one may include vendor prefixes.
div {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
Works on the x (horizontal) and y (vertical) axes.
rotate as a value for transform type allows movement within the 0 to 360 degree range, positive value = clockwise and negative = counterclockwise..box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}
Through scale, we are able to change the size of an element. Default is 1 (100%); new syntax would have scale(.75);, or any other desired as the value.
translate shifts / pushes and or pulls an element without having an impact on its surroundings, very similar to relative positioning. By the same logic, translateX and translateY change an elements position on the horizontal and vertical axis, respectively.
As can be done with scale values, if you wish to set both at once in one rule rather than separately; the values must be separated with a comma within the parenthesis, with the value for x first, then y.
.box-3 {
transform: translate(-10px, 25%);
}
skew is used to distort elements on either or both axis. Syntax convention followed closely as to scale and translate. Distance is measured in units of degrees (deg); pixels and percentages not applicable..box-3 {
transform: skew(5deg, -20deg);
}
Common occurrence for multiple transforms to be applied to a single element; in this situation, only one transform property is used for all applicable transform types (scale, skew, etc.), syntax example shown below.
.box-2 {
transform: skew(10deg, 20deg) translateX(20px);
}
The default transform origin position is the dead center of an element, halfway horizontally and vertically (50%).
We are able to change this using transform-origin property and by using up to two values (x and y axis), but if only one is used then its applied to both axes.
0 0 is the same as top left; 100% 100% is the same as bottom right.
.box-1 {
transform: scale(.75) translate(-10px, -10px);
transform-origin: 20px 50px;
}
.box-2 {
transform: scale(.5);
transform-origin: 100% 100%;
}
Issues may arise when used in conjunction with translate since they are both attempting to position the element.
Perspective is needed when working with three dimensional transforms. Set as a value for the transform property, transform: perspective(10px) on either the individual element or the parent element.
The higher the perspective value, the further away its ‘perceived’ to be, and vice-versa.
perspective-origin is also a value that can be modified.
rotate - adds rotateZ.scale - scaleZ. Works best in conjunction with other 3D transforms3D translate - translateZ
skew can’t be transformed on a three dimensional aspect.Shorthand properties also exist; rotate3d, scale3d, transition3d, and matrix3d.
Nested elements that are being transformed suffer the consequence of inheritance if the parent element is being transformed itself. To allow the nested elements to transform, the transform-style property is used with the preserve-3d value on the elements desired.
transform-style: preserve-3d;.
rotate, scale, translate, skew.Another update brought about with the rollout of CSS3. Transitions allow change between states, whereas animations set multiple points.
Allows the alteration of appearance and behavior for an element whenever a state change happens. Different styles must be identified at each state, usually by using the :hover, :focus, :active, and :target pseudo-classes.
Popular transition related properties include transition-property, transition-duration, transition-timing-function, and transition-delay.
Example showing the two different states defined for a box changing background color;
.box {
background: #2db34a; // starting color
transition-property: background; // property to change. may be mult; separated with comma
transition-duration: 1s; // time change takes to occur
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29; // new color
}
* Not all properties may be transitional. Other common transitional properties include,
background-colorbackground-positionborder-colorborder-widthborder-spacingbottomclipcolorcropfont-sizefont-weightheightleftletter-spacingline-heightmarginmax-heightmax-widthmin-heightmin-widthopacityoutline-coloroutline-offsetoutline-widthpaddingrighttext-indenttext-shadowtopvertical-alignvisibilitywidthword-spacingz-indexSet by the transition-duration property and values can be seconds (s), milliseconds (ms), and fractional seconds.
If multiple properties are defined in transition-property, different durations may be used for each individual, matching up with the order, first property to first duration.
To set the speed at which the property will transition between stages; transition-timing-function is used.
linear - moving from one state to another at a constant speed.ease-in - starts slow then finishes fast.ease-out - starts fast and finishes slow.ease-in-out - starts slow, speeds up, then finishes fast.If transitioning multiple properties, same as duration; separate duration with comma.
Set with the use of transition-delay property and uses seconds or milliseconds.
A shorthand that can be used with all transitions is, transition.
In order to specify the order the and changes of state for an animation, @keyframes is used where at minimum 2-3 different states are defined to animate. @keyframes is followed by the name of the animation, then inside the rule set we line out the ‘breakpoints’/linear progression steps and the properties that will change at said breakpoint.
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
@keyframes is one of the new updates that must be prefixed.
To apply created animations to elements, we use the animation-name property coupled with the name used after the @keyframes declaration, as a value.
animation-name: slide;
At minimum, an animation-duration property should also be declared so the browser knows how long to play the animation.
duration, timing-function, and delay all also apply to animations.
As well as the inclusion of animation-iteration-count to specify how many times one would like the animation to replay (number or infinite).
animation-direction allows declaration of direction/flow (normal, reverse, alternate, and alternate-reverse).
The ability to play or pause an animation is done through the use of the animation-play-state poperty and with running or paused values.
transition: all 0.3s ease; will be the initial state. all properties will be affected, the speed for the change will be .3 seconds, and ease as the default acceleration the change will occur.
All of these style rule definitions will require two rulesets to take effect. The initial/default selector rule, the next rule (pseudo); the selector with the changed state (what triggers it).
Used to emphasize functionality or draw attention to an object, action, etc.
.fade { // initial state; class applied to element
opacity:0.5;
}
.fade:hover { // change on hover,
opacity:1;
}
.color:hover { // 'hover' is the action that will bring the change from the initial state
background:#53a7ea;
}
Old method involved having to specify dimensions, now we can use transform: scale();.
.grow:hover { // action that bring about change
-webkit-transform: scale(1.3); // vendor / browser compatability
-ms-transform: scale(1.3); // ""
transform: scale(1.3); //
}
Inversely, shrinking is as simply. Growing involves a value greater than 1, shrinking is less than 1.
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
// pseudo class; hover
.rotate:hover {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
.circle:hover {
border-radius:50%;
}
Done by adding a box shadow and using either transform or translate to move the element along the x axis. Work well to give users feedback on actions, events, or interaction.
.threed:hover {
box-shadow:
1px 1px #53a7ea,
2px 2px #53a7ea,
3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
Done through the use of @keyframes, animation, and/or animation-iteration.
@-webkit-keyframes swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
Use of both @-webkit-keyframes and @keyframes for compatibility sense.
.swing:hover {
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
Can be used to style a ‘ghost button’; a button that has a heavy border and no background in an easier manner then hard coding a border and box sizing.
.border:hover {
box-shadow: inset 0 0 0 25px #53a7ea;
}