CSS Transforms

● ● ● ● ● ● ● ● ● ●

To use the transform 3d key words, we need a parent with a 3d rendering context.

.container{
    	perspective: 500px;
}
.container .transformed_rotate_x{
	transform: rotatex(50deg);
}
	

The value of the perspective represents the distance beetween the user and the screen.

• with a small value like 200px, the animated objets are near the user
  
• with a big value like 1000px the animated objets are far of the user

CSS Transforms

● ● ● ● ● ● ● ● ● ●

From the demo:

.transformed_rotate_y:target{
  transform: rotateY(50deg);
 }
 .transformed_rotate_x:target {
  transform: rotateX(50deg);
 }
 .transformed_rotate_x_y:target {
  transform:rotateX(50deg) rotateY(50deg);
 }

CSS Transforms

● ● ● ● ● ● ● ● ● ●

If a transformed element has a child itself transformed, the parent should preserve the 3d context for its children.
Done with transform-style: preserve-3d;

From the demo:

.parent{
	transform: rotateY(50deg);
  	transform-style: preserve-3d;	
}
.yellow_child{
	transform:rotateX(50deg);
}

CSS Transforms

● ● ● ● ● ● ● ● ● ●

TranslateY and translateX are 2d transforms
Only translateZ keyword uses the 3d context.

From the demo:

.transformed_translate_y:target{
	transform:translateY(40px);
}
.transformed_translate_x:target {
  transform: translateX(40px);
}
.transformed_translate_xy:target {
  transform:translateY(40px) translateX(20px);
}
.transformed_translate_z{
  transform:translateZ(40px);
}
.transformed_translate_z_negative{
  transform:translateZ(-40px);
}

CSS Transforms

● ● ● ● ● ● ● ● ● ●

Changing the perspective-origin

Like in a renaissance pictures we can change the vanshing point !

From the demo:

.container.un {
		perspective-origin: 50% 50%; (by default)
}
.container.deux {
	perspective-origin: 0 50%;
}

CSS Transforms

● ● ● ● ● ● ● ● ● ●

Play with perspective-origin

From the demo:

.container{
	perspective:500px;
	transform-style: preserve-3d;
	perspective-origin:65% 10%;
}
.child{
	transform-origin:top left;
	transform: rotateX(90deg);
    
    transition:height 1s ease; (for the mouvement)
}
.container:hover .child{
	height:472px;
	transition:height 1s ease;
}

CSS Transforms

● ● ● ● ● ● ● ● ● ●

Play with the cube

• step 1: place the faces
• step 2: rotate the parent to see the effect of the 3d
• step 3: rotateY the left face with a transform-origin:top right;
• step 4: rotateY the right face with a transform-origin:top left;
• step 5: rotateX the top and bottom faces with the transform-origin:bottom left; and transform-origin:top left;
• step 6: place the front face with a translateZ:200px;
• step 7:Rotate the parent container with a transition, Youhoo !!

CSS Transforms

● ● ● ● ● ● ● ● ● ●

Turn the pages

All properties together

CSS Transforms

● ● ● ● ● ● ● ● ● ●

Turn around the 3 axis: X, Y and Z

.rotated {
transform: rotate3d (1, -1, 0, 60deg); 
/* x axis, y axis, z axis, rotation degree */
}
 

CSS Transforms

● ● ● ● ● ● ● ● ● ●

What's that fish?!!

.fish{
translate3d(-10px,40px,100px);
}

.open-face{
transform: rotatez(-50deg) rotatey(90deg);
}