Setting z-index and transform?

Question

I'm working on an image gallery, when the user clicks on a photo in the gallery the photo will do a 3D animation to the center of the screen, something like this:

const style = this.state.expanded ? {
            transform: 'translate3d(' + this.state.xOffset + 'px, ' + this.state.yOffset + 'px, 10em) scale(2)',
            transition: theme.transitions.create('transform')
        } : {
                transform: 'translate3d(0px, 0px, 0px)',
                transition: theme.transitions.create('transform')
            }

That style is applied to every image in the gallery, something like:

//react-virtualized grid of: <div ref={this.divElement} style={style as any}> {...etc}</div>

This works fine except 'zIndex' is not respected when transform is applied. I've tried setting a z offset to the translate3D to no avail.

All I really want is for the expanded image to render last and on top of all the other cards.

Here's the root react virtualized component:

class MasonryComponent extends React.Component<IMasonryProps, IMasonryState>
{
    state = {
        columns: 3
    }
    _cellPositioner: Positioner | undefined = undefined

    // Default sizes help Masonry decide how many images to batch-measure
    cache = new CellMeasurerCache({
        defaultHeight,
        defaultWidth,
        fixedWidth: true
    });

    columnWidth = () => {
        const { columnWidth, width } = this.props;

        // const newW = width > columnWidth ? columnWidth : width;

        return width > columnWidth ? columnWidth : width;
    }

    _initCellPositioner = () => {
        const columnWidth = this.columnWidth()
        if (typeof this._cellPositioner === 'undefined') {
            this._cellPositioner = createMasonryCellPositioner({
                cellMeasurerCache: this.cache,
                columnCount: this.state.columns,
                columnWidth,
                spacer: gutter,
            });
        }
    }

    componentWillReceiveProps(nextProps: IMasonryProps) {
        if (JSON.stringify(nextProps.items) !== JSON.stringify(this.props.items)) {
            this._masonry.current!.clearCellPositions();

            this.cache.clearAll();
            this.cellPositioner(this.props.width);
            this._masonry.current!.clearCellPositions();
        }
    }

    cellPositioner = (width: number): Positioner => {
        const columnWidth = this.columnWidth()
        const columns = Math.floor(width / columnWidth);
        if (this.state.columns != columns)
            this.setState({ columns: columns });

        this._cellPositioner!.reset({
            columnCount: columns,
            columnWidth: columnWidth,
            spacer: gutter
        })

        if (this._masonry.current)
            this._masonry.current.recomputeCellPositions();


        return this._cellPositioner!
    }
    _masonry = React.createRef<Masonry>()

    cellRenderer = ({ index, key, parent, style }: any) => {
        const props = this.props;
        if (!props.items[index])
            return <div>404</div>

        const item = props.items[index];
        let customRender = props.customRender;

        const size = this.props.imageSizeResolve(item);
        const columnWidth = this.columnWidth()
        return (
            <CellMeasurer cache={this.cache} index={index} key={key} parent={parent}>
                {customRender ? customRender(item, style, columnWidth) :
                    <div style={style}>
                        <img
                            src={item.url}
                            style={{
                                width: columnWidth,
                                height: columnWidth / size.width * size.height
                            }}
                        />
                    </div>}
            </CellMeasurer>
        );
    }
    public render() {
        const props = this.props;

        this._initCellPositioner();

        const columnWidth = this.columnWidth()
        let paddingLeft = props.width < columnWidth ? 0 : (props.width - (columnWidth + gutter) * this.state.columns) / 2
        if (paddingLeft < 0) {
            paddingLeft = 0;
        }
        return (
            <Masonry
                style={{
                    paddingLeft
                }}
                overscanByPixels={1080}
                ref={this._masonry}
                autoHeight={false}
                cellCount={props.items ? props.items.length : 0}
                cellMeasurerCache={this.cache}
                cellPositioner={this.cellPositioner(props.width)}
                cellRenderer={this.cellRenderer}
                height={props.height}
                width={props.width}
            />
        );
    }
};

Anyway to accomplish this?