Problems applying css property to element

[jhrcek]

I'd like to apply [rotateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX()) as CSS property to an element to animate 3D rotation around X axis.

Here's a sample code, but try as I might, the property doesn't appear in the final svg

import Graphics.SvgTree (Number (Num), cssApply)
import Graphics.SvgTree.CssTypes (CssDeclaration (CssDeclaration), CssDescriptor (OfId), CssElement (CssFunction, CssNumber), CssRule (CssRule), CssSelector (AllOf))
import Reanimate (Animation, addStatic, animate, mkBackground, mkRect, reanimate, withId)

main :: IO ()
main = reanimate animation

animation :: Animation
animation =
    addStatic (mkBackground "white") $
        animate $ \t ->
            cssApply [rotateCss (360 * t)] $
                withId "logo" $
                    mkRect 1 1

rotateCss :: Double -> CssRule
rotateCss degrees =
    CssRule
        [[AllOf [OfId "logo"]]]
        [ CssDeclaration
            "transform"
            [[CssFunction "rotateX" [CssNumber (Num degrees)]]]
        ]

The CSS seems valid when rendered in GHCi:

λ> import Graphics.SvgTree.CssTypes
λ> tserialize (rotateCss 90)
"#logo {\n  transform: rotateX(90);\n}\n"

But it doesn't end up in the output svg that appears in reanimate browser viewer

<svg viewBox="-8 -4.5 16 9"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none">
    <g stroke-width="0.05" transform="scale(1, -1)">
        <g>
            <rect stroke-width="0" fill="#FFFFFF" fill-opacity="1" width="16" height="9" x="-8" y="-4.5" />
            <rect id="logo" width="1" height="1" x="-0.5" y="-0.5" />
        </g>
    </g>
</svg>

Do you have any general observations why that CSS property is not applied? Are there some unsupported properties or something? If not, I'll look more deeply into this over the weekend.

[lemmih]

I don't think any of the css code works anymore. It should really be deleted.

[jhrcek]

What would you suggest as an ergonomic way to achieve this kind of simple 3D rotation?

[lemmih]

Well, 3D is beyond the specification for SVG. Some SVG renderers do support CSS3 but you're in uncharted waters. I don't expect there are any easy ways of doing 3D graphics with SVGs.

[jhrcek]

Ok, I was able to achieve the rotation I wanted using scaleXY + some trig functions. I'm closing this.