如何在容器内保留CSS 3D Cube顶点

Question

我正在尝试复制Instagram Stories 3D过渡效果。

要查看转换视图用户素材并从左向右滑动以转到其他用户素材。

在Instagram上，顶点始终在屏幕上可见，但在尝试使用CSS复制时，在旋转期间，顶部和底部顶点会移出容器外部，如下图所示：

如何使旋转保持顶点在可见区域内，就像Instagram在过渡期间所做的那样。

以下是练习代码：

＆＃13;

＆＃13;

.history-wrapper {
	display:block;
}

.rotate-previous {
	transform:rotateY(90deg) translateX(50%) translateZ(0);
}

.rotate-next {
	transform: rotateY(-90deg) translateX(-190px) translateZ(190px);
}

.history-container {
	display:inline-flex;
	height: 100%;
	left:0;
	min-width:100%;
	position: absolute;
  transform-style: preserve-3d;
	transition: transform 1s;
	top:0;
	perspective-origin: 50% 100%;
}

.us-item {
	backface-visibility: hidden;
	display:block;
	position:absolute;
	z-index:0;
}

.us-item.left {
	transform:rotateY(-90deg);
	right:100%;
	transform-origin:right top;	
	z-index:1;
	background:cyan;
}
.us-item.center {
	transform:rotateY(0deg);
	z-index:2;
	background:green;
}

.us-item.right {
	left:100%;
	transform:rotateY(90deg);
	transform-origin:top left;	
	z-index:3;
	background:blue;
}

/* DEMO SPECIFIC CSS */
.history-wrapper {
	height:500px;
	margin:0 auto;
	perspective:380px;
	width:380px;
}

.us-item {
	background-color:#efefef;
	width:380px;
	height:500px;
}

.history-container {
	height:500px;
}

.history-container:hover {
	transform: rotateY(-90deg) translateX(-190px) translateZ(190px);
}

＆＃13;

<div style="margin-top: 0px;">
	    <div>
	        <div class="os-stories history-wrapper">
	            <div class="history-container">
	                <div>
	                    <div class="us-item left">
	                        <div class="us-item-content">
	                            User Story Item Info
	                        </div>
	                    </div>
	                </div>
	                <div>
	                    <div class="us-item center current">
	                        <div class="us-item-content">
	                            User Story Item Info
	                        </div>
	                    </div>
	                </div>
	                <div>
	                    <div class="us-item right">
	                        <div class="us-item-content">
	                            User Story Item Info
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

＆＃13;

＆＃13;

＆＃13;

提前致谢。