# React VR: Transform

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:

GitHub

Instagram