Установка z-index и преобразование?

Question

Я работаю над галереей изображений, когда пользователь нажимает на фотографию в галерее, фотография будет делать 3D-анимацию в центре экрана, что-то вроде этого:

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')
            }

ЭтоСтиль применяется к каждому изображению в галерее, например:

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

Это прекрасно работает, за исключением того, что zIndex не учитывается при применении преобразования.Я попытался установить смещение az для translate3D, но безрезультатно.

Все, что мне действительно нужно, это чтобы расширенное изображение отображалось последним и поверх всех остальных карт.

Вот кореньреагировать виртуализированный компонент:

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}
            />
        );
    }
};

В любом случае, чтобы выполнить это?