@mapagella came to me with a question. A friend of his was trying to do ray tracing with CSS3. He wanted to rotate in 3D a <div>
element shaped like a line so that it started and ended in specific points in space.
It turns out that CSS3 defines a rotate3d()
transform function that allows you to rotate an HTML element a certain angle around a certain direction in 3D space. The function looks like rotate3d(x, y, z, angle)
where x
, y
and z
define the direction around which the element will be rotated. The question then is what direction and which angle to use.
Let's start by defining what our line will be. We'll use a div
element with a line
class: <div class="line"></div>
. And we'll define line
as:
.line {
background: green;