CSS

Transform

in css3 new ways of positioning and altering elements come up to the screen, the transform property for 2 dimensions and 3 dimensions have many properties for each of them.

the transform syntax for value 1.5 of scale:

div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

as in the example above, we see that the transform are written for all the vendors (browser) to ensure that the effect applied in all browsers.

for 2D transforms, we use rotate value with the degree within as shown in below:

<div class="original">
  <div class="spin">
    <figure class="box box-1">Hi</figure>
  </div>
</div>

<div class="original">
  <div class="spin">
    <figure class="box box-2">Hello</figure>
  </div>
</div>

<style>body {
  color: #fff;
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 12px 15px;
}
.original,
.box {
  border-radius: 6px;
}
.original {
  background: #ffff00;
  border: 1px dashed #cecfd5;
  float: left;
  margin: 12px 15px;
}
.box {
  background: #ff0000;
  height: 95px;
  line-height: 95px;
  text-align: center;
  width: 95px;
}
.spin {
  cursor: pointer;
  transform-style: preserve-3d;
}
.spin:hover {
    animation: spin 5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.box-1 {
  transform: rotate(20deg);
}
.box-2 {
  transform: rotate(-55deg);
}
</style>

The below boxes are generated by the code above.

Hi

Hello

For 3D transform we use the property transform with two values, perspective with the size of the element, and the rotate followed by the degree of rotation, the rotate value is available for the three dimensions, rotateX, rotateY, and rotateZ.

Transition and Animation

css3 gives the ability for developers to write behaviors for transition and animation with out the use of javascript or flash.

For transition to take place, the element must have the a change in state, and different styles need to be identified for each state. By using :hover, :focus, :active, and :target pseudo classed we can easily determine the styles for different states.

to apply transition for an element, first we need to use transition-property, with a value of background transition property will be applied for the background, second we need to set time duration for the transition by setting the value of the transition-duration to time in seconds. and finally we must tell when the transition will happen, when we hover over the element or any other actions.
the following code will change the background of the element, the text color within and the shape from box to circle when the mouse hovers over the box, and the changing(transition) will last for 3 seconds.

<div class="box-3">Hello</div>
<style>
.box-3 {
  color: ffffff;
  background: #3526ff;
  border-radius: 6px;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  transition-property: background, color, border-radius;
  transition-duration: 3s;
  transition-timing-function: linear;
  width: 95px;
}
.box-3:hover {
  background: #ffff00;
  color:#ff0000;
  border-radius: 50%;
}
</style>

The below shape generated using the code above.

Hello

as shown in the example the transition can be done on many properties and when certain event happens, the transition can be set for one property.