1.
Hello

3D world!

CodePen

https://codepen.io/YusukeNakaya/

 Let's fork

and touch

translate: translate3d(x, y, z);

translate: translateX(x) translateY(y) translateZ(z);

2.
property:

value

Question!

properties for 3D

?

3D transforms family

• transform:

• perspective:

• transform-style:

transform:

• translate

• rotate

• scale

• skew

perspective:

2000px

400px

transform-style:

flat

preserve-3d

3.
Transform

tips

Question 1!

transform: rotateY(90deg) translateZ(100px);

transform: translateZ(100px) rotateY(90deg);

?

No!

transform: 1 2 3 4 ...;

Order list

rotation　　translation

transform: rotateY(90deg) translateZ(100px);

Example

Question 2!

transform: translateX(10px) translateX(20px);

?

OK!

transform: 1 + 2 + 3 ...;

Add

Example

transform: translateX(10px) translateX(20px);

10 + 20 = 30px

Question 3!

transform:

translateX(-10px) rotateZ(-90deg) translateX(10px);

?

Only rotate!

4.
Making of

DICE

HTML(pug)

// DICE

// 6 Walls

CSS(SCSS)

//

HTML(pug)

// DICE

// 6 Walls

.dice

CSS(SCSS)

//

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

CSS(SCSS)

//

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

//

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  ...

  &_wall {

    width: 200px;

    height: 200px;

    background: rgba(#fff, 0.5);

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    ...

    position: absolute;

    top: calc(50% - 100px);

    left: calc(50% - 100px);

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    &:nth-child(1) {

      transform: translateZ(100px);

    }

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    ...

    &:nth-child(2) {

      transform:

        rotateY(90deg)

        translateZ(100px);

    }

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    ...

    &:nth-child(3) {

      transform:

        rotateX(90deg)

        translateZ(100px);

    }

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    ...

    &:nth-child(4) {

      transform:

        rotateX(-90deg)

        translateZ(100px);

    }

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    ...

    &:nth-child(5) {

      transform:

        rotateY(-90deg)

        translateZ(100px);

    }

  }

}

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

  .dice_wall 2

  .dice_wall 3

  .dice_wall 4

  .dice_wall 5

  .dice_wall 6

CSS(SCSS)

// DICE

.dice {

  &_wall {

    ...

    &:nth-child(6) {

      transform:

        rotateY(180deg)

        translateZ(100px);

    }

  }

}

Goal !!!