我正在尝试遮帘 - http://jsfiddle.net/ykcgkvu2/
虽然它运作正常,但希望通过应用横向用户视角来改进它。
当前场景:有一面灰色的墙壁,窗帘上有红色/蓝色的百叶窗。当它们旋转时,你也可以看到不那么吸引人的墙,因为我觉得应该只有2种颜色可见,而不是3种。
预期场景:想象一下,您正站在墙的最左侧或右侧。当您看到百叶窗旋转时,只能看到红色或蓝色,而不是灰色墙。
那么,是否有可能实现这一目标。我尝试使用perspective-origin
,但没有运气。
HTML:
<section class="container">
<div class="card">
<figure class="front">1f</figure>
<figure class="back">1b</figure>
</div>
</section>
CSS:
.container {
width: 10%;
height: 100vh;
position: relative;
float: left;
overflow: hidden;
perspective: 800px;
}
更新:请查看图片。使用者与窗帘成一定角度。图片显示转型中的百叶窗。在开始,中间或完成期间,从这个角度来看,用户看不到后面的墙。只有盲人的前/后颜色。
如果您仍然无法想象我的想法,只需将自己置于一个切线角度,在开始,中间,结束时,您根本无法看到墙壁,只能看到百叶窗的正面/背面。转型......
希望我有所作为。
感谢大家的想法。我只是想看看这是否可能。