css如何实现窗户的开启的demo效果

窗户模型如下：

image.png

1.查阅网上资料，回顾 css3d 中 transform的运用、景深的概念
https://m.jb51.net/css/515797.html

下面直接上代码：

        
        /*样式代码*/
    body {
        padding: 300px;
    }
      .block {
        width: 176px;
        height: 176px;
        cursor: pointer;
        /* 3D变形 */
        transform-style: preserve-3d;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
        border: 12px solid #8B0000;
    }

    .block-in {
        background: #4ba6ae;
        height:177px;
        width: 177px;
        transition: 2s;
        transform-origin: 0;
        background: url(222222221.png) #4ba6ae;
        /* border: 10px solid #ffab28; */
        /* box-sizing: border-box; */
    }

    .block:hover .block-in {
        transform: rotateY(-140deg);
    }

<!-- HTML结构 -->
<h3><p>鼠标hover展示开关窗效果</p><h3>
<br>
<br>
<div class="block">
    <div class="block-in"></div>
</div>

最终效果

开关窗效果.gif

以上只是展示了效果的可行性，实际运用还会涉及很多dom结构与原有transform冲突的问题需要解决