# Get 3D quad rotation matrix from points

I have 4 3D points which represent a even quad in space. (So 3 points are sufficient) I need to get all the individual transformations (translation, rotation, dimensions) so that I can build that quad in my CSS 3D engine. So the default normal vector for a quad is [0, 0, 1].

What I have so far:

// 4 points
p0, p1, p2, p3

// normal
normal = cross(p1 - p0, p2 - p0)

// axis and angle
axis = cross([0, 0, 1], normal)
angle = arccos(dot([0, 0, 1], normal))

// rotation matrix
rotationMatrix = matrix4.fromAxisAngle(axis, angle)

// width and height
width = sqrt((p2.x - p1.x)^2, (p2.y - p1.y)^2, (p2.z - p1.z)^2)
height = sqrt((p1.x - p0.x)^2, (p1.y - p0.y)^2, (p1.z - p0.z)^2)

// translation
x = (p0.x + p1.x + p2.x + p3.x) / 4
y = (p0.y + p1.y + p2.y + p3.y) / 4
z = (p0.z + p1.z + p2.z + p3.z) / 4


It almost works, but some rotations are wrong or more specifically one rotation axis is missing. This is logical because the rotation is only build from the normal. So how can I get the full rotation?

Here you see that the top and bottom quads are just rotated around the x axis but the y axis rotation is missing:

Ok, think I got it. I now build the rotation matrix directly from the vectors:

xAxis = cross(normal, (p1 - p0))
yAxis = cross(normal, xAxis)
zAxis = normal

rotationMatrix = [
xAxis.x, yAxis.x, zAxis.x,
xAxis.y, yAxis.y, zAxis.y,
xAxis.z, yAxis.z, zAxis.z
]

• That's the right way to do it. – Pieter Geerkens Jan 1 '15 at 18:58
• make sure to normalize xAxis, yAxis and zAxis. – mklingen Jan 1 '15 at 18:59
• @mklingen yes sure..in my final code I normalized the axes before putting them into the matrix. – redreggae Jan 2 '15 at 15:52