如何获得水平视角 - CSS

时间:2015-09-25 13:25:06

标签: css css3

我正在尝试遮帘 - 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;
 }

enter image description here

更新:请查看图片。使用者与窗帘成一定角度。图片显示转型中的百叶窗。在开始,中间或完成期间,从这个角度来看,用户看不到后面的墙。只有盲人的前/后颜色。

如果您仍然无法想象我的想法,只需将自己置于一个切线角度,在开始,中间,结束时,您根本无法看到墙壁,只能看到百叶窗的正面/背面。转型......

希望我有所作为。

感谢大家的想法。我只是想看看这是否可能。

0 个答案:

没有答案