gleaming the cube with absto

using css to make a cube.

https://getabsto.com

abstodemo

    import bs4, requests
    from midgy.language.python import Css, HTML
    from nbconvert_a11y.table import new
    __import__("requests_cache").install_cache()
    soup = bs4.BeautifulSoup((response := requests.get("https://getabsto.com/")).text, features="lxml")
    df = Series(soup.select("img")).attrgetter("attrs").series()
    df.src = response.url + df.src

%%
## the cube

    cube = df.sample(6)
    HTML(new("div", *cube.apply(lambda s: new("img", src=s.src), axis=1), id="absto"))

the cube

cube = df.sample(6)
HTML(new("div", *cube.apply(lambda s: new("img", src=s.src), axis=1), id="absto"))

%%
## css sorcery

defining variables independent of their expressions lets us use dev tools a user interface for changing the parameters. it is cheap, cheap UI.

    variables: Css =\
```css
#absto {
    --w: 200px;
    --w2: calc(var(--w) / 2);
    --mul: 2;
    --opacity: 90%;
    --h: 200px;
    --α: 10deg;
    --β: 10deg;
    --γ: 10deg;
    --hue: 180deg;
}
```

### define constraints for the parent holding the faces.

    parent_and_images: Css =\
```css
#absto {
    border: 100px;
    display: block;
    position: relative;
    width: calc(var(--mul) * var(--w)); height: calc(var(--mul) * var(--h));
    transform-style: preserve-3d;
    padding: 100px;
    box-sizing: border-box;
    img {
        transition: rotate 2s;
        filter: hue-rotate(var(--hue));
        position: absolute;
        width: var(--w); height: var(--h);
        border: solid 2px;
        opacity: var(--opacity);
    }
}
```

### define rotation properties to make the faces.

    rotations: Css =\
```css
#absto {
    --r:  rotateY(var(--α)) rotateZ(var(--β)) rotateX(var(--γ));
    filter: var(--hue);
    transform-origin: var(--w2) var(--w2) 0;
    transform:  var(--r) translate(var(--w2), var(--w2));
    img {
        transform-origin: 50% 50% 0;
    }
    img:nth-child(2) {
        transform: 
            translateX(var(--w2))
            rotateY(90deg)
            ;
    }
    img:nth-child(3) {
        transform: 
            translateX(calc(-1 * var(--w2)))
            rotateY(90deg)
            ;
    }
    img:nth-child(4) {
        transform: 
            translateY(var(--w2))
            rotateX(90deg)
            ;
    }
    img:nth-child(5) {
        transform: 
            translateY(calc(-1 * var(--w2)))
            rotateX(90deg)
            ;
    }
    img:nth-child(6) {
        transform: 
            translateZ(var(--w2))
            ;
    }
    img:nth-child(1) {
        transform: 
            translateZ(calc(-1 * var(--w2)))
            ;
    }

}
```

    display(variables, parent_and_images, rotations)

css sorcery

defining variables independent of their expressions lets us use dev tools a user interface for changing the parameters. it is cheap, cheap UI.

variables: Css =\

#absto {
    --w: 200px;
    --w2: calc(var(--w) / 2);
    --mul: 2;
    --opacity: 90%;
    --h: 200px;
    --α: 10deg;
    --β: 10deg;
    --γ: 10deg;
    --hue: 180deg;
}

define constraints for the parent holding the faces.

parent_and_images: Css =\

#absto {
    border: 100px;
    display: block;
    position: relative;
    width: calc(var(--mul) * var(--w)); height: calc(var(--mul) * var(--h));
    transform-style: preserve-3d;
    padding: 100px;
    box-sizing: border-box;
    img {
        transition: rotate 2s;
        filter: hue-rotate(var(--hue));
        position: absolute;
        width: var(--w); height: var(--h);
        border: solid 2px;
        opacity: var(--opacity);
    }
}

define rotation properties to make the faces.

rotations: Css =\

#absto {
    --r:  rotateY(var(--α)) rotateZ(var(--β)) rotateX(var(--γ));
    filter: var(--hue);
    transform-origin: var(--w2) var(--w2) 0;
    transform:  var(--r) translate(var(--w2), var(--w2));
    img {
        transform-origin: 50% 50% 0;
    }
    img:nth-child(2) {
        transform: 
            translateX(var(--w2))
            rotateY(90deg)
            ;
    }
    img:nth-child(3) {
        transform: 
            translateX(calc(-1 * var(--w2)))
            rotateY(90deg)
            ;
    }
    img:nth-child(4) {
        transform: 
            translateY(var(--w2))
            rotateX(90deg)
            ;
    }
    img:nth-child(5) {
        transform: 
            translateY(calc(-1 * var(--w2)))
            rotateX(90deg)
            ;
    }
    img:nth-child(6) {
        transform: 
            translateZ(var(--w2))
            ;
    }
    img:nth-child(1) {
        transform: 
            translateZ(calc(-1 * var(--w2)))
            ;
    }

}

display(variables, parent_and_images, rotations)

%% 
```css
[href="#absto"] {
    display: inline-block;
    background: -moz-element(#absto);
    background-size: contain;
    font-size: 5rem;
}
```

[href="#absto"] {
    display: inline-block;
    background: -moz-element(#absto);
    background-size: contain;
    font-size: 5rem;
}