React VR: Transform

In this lesson we will learn about 3D Transforms.

Transforms

To position, rotate and scale components, we will use transforms.

<Box
  dimWidth={1}
  dimHeight={1}
  dimDepth={1}
  wireframe={true}
  style={{
    color: 'green',
    transform: [
                {translate: [0, -1, -3]},
                {rotateY: 33},
                {rotateZ: 33},
                {scale : 0.75},
              ]
  }}
/>
      

Translate

We can position our box using translate. An array is passed in: [x-axis,y-axis,z-axis]. Refer to React VR's coordinate system to properly position your component.

          transform: [
                      {translate: [0, -1, -3]},
                      {rotateY: 33},
                      {rotateZ: 33},
                      {scale : 0.75},
                    ]
        

➼ {translate: [0, -1, -3]}, - positions our box
➼ 0 - x-axis
➼ -1 - y-axis
➼ -3 - z-axis

Rotate

You can:
✶ rotateX - along x-axis
✶ rotateY - along y-axis
✶ rotateZ - along z-axis

transform: [
            {translate: [0, -1, -3]},
            {rotateY: 33},
            {rotateZ: 33},
            {scale : 0.75},
          ]
      

➼ {rotateY: 33} - Rotate on the y-axis 33 degrees
➼ {rotateZ: 33} - Rotate on the z-axis 33 degrees

Scale

You can pass in a single number or an array. If you use a single number, it will scale the same along each axis. Alternatively, you can pass in an array of values [x,y,z]

<Box
  dimWidth={1}
  dimHeight={1}
  dimDepth={1}
  wireframe={true}
  style={{
    color: 'green',
    transform: [
                {translate: [0, -1, -3]},
                {rotateY: 33},
                {rotateZ: 33},
                {scale : 0.75},
              ]
  }}
/>
      

➼ {scale : 0.75} - Scale the box down 75%

Back to Lesson 7 | Continue to Lesson 9