Skip to content

‘transform-style: preserve-3d’ does not work #30474

@delan

Description

@delan
<!doctype html><meta charset=utf-8>
<div style="position: absolute; inset: 50px 0 0 50px; transform-style: preserve-3d">
    <div style="position: absolute; width: 100px; height: 100px; background: blue; transform: translateZ(1px)"></div>
    <div style="position: absolute; width: 100px; height: 100px; background: red; transform: translateZ(-1px)"></div>
</div>
<div style="position: absolute; inset: 50px 0 0 200px; transform-style: preserve-3d">
    <div style="position: absolute; width: 100px; height: 100px; background: blue; transform: rotate3d(1,1,1,30deg)"></div>
    <div style="position: absolute; width: 100px; height: 100px; background: red; transform: rotateZ(180deg)"></div>
</div>

image image

#30458 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-content/cssInteracting with CSS from web content (parsing, serializing, introspection)A-layout/2020https://github.com/servo/servo/wiki/Layout-2020

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions