CSS Matrix3D transform

Question

I have created the 3D effect I am after using RotateX in this fiddle:

However, I am unsure how to achieve the same effect on the red square in this Fiddle:

http://jsfiddle.net/paulsidebottom/jbfSj/

What Matrix3D transform do I need to apply to the marker to get it to stand up in the vertical plane?

Rich Bradshaw · Accepted Answer · 2012-01-14 12:29:06Z

4

By inspecting the first example, then looking at the computed tab in Webkit's inspector, you can see the matrix the first one used was:

-webkit-transform: matrix3d(1, 0, 0, 0,
                            0, 0.5000000000000001, -0.8660254037844386, 0, 0,
                            0.8660254037844386, 0.5000000000000001, 0,
                            0, 0, 0, 1);

Applying this as is doesn't seem to work in your second example, but this maybe because of other differences in your code.

The reason this is used is because a rotation matrix in the X axis looks like:

[1,0,0,0],
[0,cos(a), sin(-a), 0],
[0,sin(a), cos( a), 0],
[0,0,0,1]

In your case, a is 60 degrees, which in radians is π/3. cos(π/3) = 0.5, and sin(π/3) = sqrt(3)/2 = 0.866025.

answered Jan 14, 2012 at 12:29

Rich Bradshaw

73.3k46 gold badges190 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sidebp Over a year ago

Whilst I haven't resolved the issue, the approach you suggested was logical and of use. I have applied the matrix3D transform directly to the element and it looks the same as the rotationX therefore something else must be at fault.

Collectives™ on Stack Overflow

CSS Matrix3D transform

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related