设置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'之外。我尝试将transform3D的z偏移设置为无效。

我真正想要的是将扩展后的图像渲染到所有其他卡片的最后一个位置。

这是根反应虚拟化组件：

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

有什么办法做到吗？