I'm having trouble trying to display three cartesian planes in 3D, when they rotate the planes get stretched in one direction (z-axis, blue) and compressed in another (x-axis, red) like these images showing rotation around the y-axis: 

45 degrees:  

[![](https://i.stack.imgur.com/r3P5W.jpg)](https://i.stack.imgur.com/r3P5W.jpg) 

95 degrees:  

[![enter image description here](https://i.stack.imgur.com/tpwmG.jpg)](https://i.stack.imgur.com/tpwmG.jpg)

135 degrees:
[![enter image description here](https://i.stack.imgur.com/BLnIW.jpg)](https://i.stack.imgur.com/BLnIW.jpg)

I calculate the perspective matrix, with mat4.perspective from the gl-matrix library:

```
mat4.perspective(this.pMatrix_, this.vFieldOfView_, this.aspect_, this.near_, this.far_);

```

with values of:

```
private near_ = 0.1;
private far_ = 1000.0;
private vFieldOfView_ = 60.0 * Math.PI / 180;

```

Vertex Shader:

```
void main(void) {
    gl_Position = uProjection * uView * uTransform * vec4(aVertexPosition, 1.0);
}

```

The view matrix translates the object 2.0 units away from the camera. 

```
let t = new Mat4();
t.array[12] = v.x;
t.array[13] = v.y;
t.array[14] = v.z;

```

I rotate the planes around the y-axis using the matrix generated from this code:

```
// identity matrix already set
let rad = angle * Math.PI / 180;
r.array[0] = Math.cos(rad);
r.array[2] = Math.sin(rad);
r.array[8] = -1.0 * Math.sin(rad);
r.array[10] = Math.cos(rad);

```

And I multiply the three transform matrices of the object in this order:
rotation \* translation \* scale. Was using quaternions to handle rotations but they were similarly distorted so went back to using rotation matrices and kept the rotation simple, in one axis. It looks like I'm doing some multiplication step in the wrong order or not using the perspective matrix correctly or got a sign wrong.

Update:

Just to clarify on the value of some of the matrices in vertex shader:

uProjection = pMatrix\_ = value obtained from mat.perspective(...). 

uView = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -2.0, 0, 0, 0, 1] i.e. matrix translated 2 units away in z-axis.

uTransform should be identity matrix in this example.

Update2:

uView was actually [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -2.0, 1]