窗户模型如下：
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冲突的问题需要解决
