Category Archives: CSS

CSS3 3D Transforms | Perspective

Leave a reply

Perspective defines how the depth of the 3D scene is rendered. Think of perspective as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.

When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

#div16 {
    height: 200px;
    width: 200px;
    border: 2px solid red;
    perspective: 100px;
}
#div17 {
    height: 200px;
    width: 200px;
    position: absolute;
    background-color: orange;
    color: black;
    border: 1px solid white;
}
#div17:hover {
    transform: rotateX(45deg);
}

Continue reading →

CSS3 3D Transforms | 3D Translations

Leave a reply

3D translate methods allow you to move an element horizontally (translateX), vertically (translateY) and into or out of the screen (translateZ). You can use any CSS length units (px, em, %, etc).

#div15 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}

#div15:hover {
   transform: translateX(29px) 
     translateY(5em) 
     translateZ(-13px);
}

Continue reading →

CSS3 3D Transforms

Leave a reply

3D Transforms are quite similar to 2D Transforms. Besides rotateX() and rotateY() the 3D Transforms introduces rotateZ() to rotate an element in 3D space around the corresponding axis at a given degree.

#div12 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}
#div12:hover {
    transform: rotateX(150deg);
}

#div13 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}
#div13:hover {
    transform: rotateY(150deg);
}

#div14 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}
#div14:hover {
    transform: rotateZ(150deg);
}

Continue reading →

CSS3 Animations | The animation Property

Leave a reply

To demonstrate how the animation property works let’s consider the following example:

#div11 {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin-bottom: 30px;
}
@keyframes animation1 {
    from { width: 0px; }
    to { width: 200px; }
}
#div11:hover {
   animation-name: animation1;
   animation-duration: 3s;
   animation-timing-function: ease-in;
   animation-delay: 1s;
   animation-direction: reverse;
}

Continue reading →

CSS3 Animations | Properties

Leave a reply

animation-timing-function

The animation-timing-function is used to specify the speed curve of an animation. The possible values are shown below:

  • ease – specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear – same speed from start to end
  • ease-in – slow start
  • ease-out – slow end
  • ease-in-out – slow start and end
  • cubic-bezier(n,n,n,n) – define your own values in a cubic-bezier function

Continue reading →

CSS3 Animations | @keyframes

Leave a reply

To get an animation to work, you must bind the animation to an element.
In the example below, the animation lasts one second, and changes the background color of the orange div to green and blue.

#div10 {
    width: 200px;
    height: 100px;
    background-color: orange;
}
#div10:hover {
    animation-name: colorchange;
    animation-duration: 1s;
    -webkit-animation-name: colorchange;
    -webkit-animation-duration: 1s;
}
@keyframes colorchange {
    0% {background-color: orange; }
    50% {background-color: green; }
    100% {background-color: blue; }
}

Continue reading →

CSS3 Transforms | The translate() Method

Leave a reply

The translate() method moves an element from its current position. The first parameter is for the x-axis (100px in our example) and the second is for the y-axis (50px in our example).

Positive values push an element down and to the right. Negative values pull an element up and to the left.

#div6 {
	height: 100px;
	width: 100px;
	background-color: orange;
	padding: 50px;
	margin-bottom: 30px;
}
#div6:hover {
	transform:translate(100px, 50px);
}

Continue reading →