Re: [css-transforms] CSS3D breaks with opacity flattening

This is fairly convincing for me:

On 19 September 2016 at 15:20, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>
>
> While it's reasonable to want to apply opacity individually to all the
> objects in a group, applying it to every *leaf shape* in the group is
> almost certainly not wanted, except in the simplest of cases.  In most
> cases you just want the opacity to be somewhat further down, not
> pushed all the way to the leaves (thus avoiding the "screaming ghost
> skull" problem).
>
> So, an inherited property that only applies to leaf nodes is almost
> certainly not desired.
>

I therefore repeat my other comment:

Otherwise, my best recommendation to people who want the 3D opacity effect
> is to use CSS variables to set your alpha factor on your group, and then
> use opacity:var(--alpha) on any (flat) layer that actually includes painted
> content.


> Unfortunately, however, for now that means not being able to use CSS
> animations/transitions or web animation to transition alpha.  We're still
> waiting for typed CSS custom properties that can be interpolated.


Basically, you want to be able to write code like:

.object { /* the entire group whose opacity you want to control together,
without flattening */
  --alpha: 0.7;
  transform-style: preserve-3d;
  transition: alpha 1s ease-out; /* this is the missing part when using
variables */
}
.layer { /* the 3D layers or faces whose child content & backgrounds should
be flattened into a single texture */
  opacity: var(--alpha);
}
.object.hide {
  --alpha: 0;
}

(And yes, I know that in this simple example you could get the transitions
to work by setting the transition on .layer's opacity property. But that
won't always work in the general case.)