Home Linux HTML/CSS PHP React VR Blog PHP Fiddle

React VR: Transform






Coding Commanders Newsletter





Quick Copy Boxes





JavaScriptReact VRTransform

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%


Color Selector



Hex:


RBG:


Commander Candy Q&A:


If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE




Questions? Contact me on my social media:

YouTube

GitHub

Facebook

Instagram

Twitter

T-shirt Shop

Back to Lesson 7 | Continue to Lesson 9