Try! CSS 3D

Yusuke Nakaya

  • oRo Co., Ltd
  • Technical Creator​
  • HTML, CSS, JavaScript, Vue.js, Nuxt.js ...
  • Animation, Interaction ...
  • Cars, Snowboard, Video game ...

@s14garnet

Yusuke Nakaya

today's goal

Math

Steps

  • Hello 3D world!
  • property: value
  • Transform tips
  • Making of DICE

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

?

B

A

C

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)

//

.dice

HTML(pug)

// DICE

// 6 Walls

.dice

  .dice_wall 1

CSS(SCSS)

//

.dice

.dice_wall

1

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

1

.dice_wall

2

.dice_wall

3

...

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;

}

.dice

.dice_wall

1

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);

  }

}

size

opacity

.dice

.dice_wall

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);

  }

}

Centering

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);

    }

  }

}

Z

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);

    }

  }

}

rotate + translate

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 !!!

Have a nice coding!

see you

@s14garnet

Yusuke Nakaya

Made with Slides.com