どうも！LSSです！！
今回はCSS小ネタです。
CSSの3D表現を忘れそうになっていたので、個人的なリハビリにｗ
ドアの向こうに
コード
<style>
@keyframes brbr{
0%{transform:rotateY(-95deg);}
100%{transform:rotateY(95deg);}
}
.waku{
position:relative;
width:280px;
height:200px;
background:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%;
}
.waku>div{
position:relative;
width:100%;
height:100%;
transform-style:preserve-3d;
perspective:600px;
border:1px solid black;
}
.waku>div>div{
position:absolute;
width:50%;
height:100%;
top:0;
background:#ddaaaa;
animation:brbr 6s ease-in-out infinite;
}
.waku>div>div:nth-child(1){
left:0;
transform-origin:0 50%;
animation-direction:alternate;
}
.waku>div>div:nth-child(2){
right:0;
transform-origin:100% 50%;
animation-direction:alternate-reverse;
}
</style>
<div class="waku">
<div>
<div> </div>
<div> </div>
</div>
</div>
向こうの風景
今回のコード中、ドアの向こうの風景を描いているのは
background:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%;
の箇所です。
この青太字部分を
url('画像ファイルのURL')
に書き換えて、（赤文字部分は更に画像ファイルのURLに差し替え）
background:url('画像ファイルのURL') 0 0/100% 100%;
のようにすると、ドアの向こうの風景が指定した画像になります。
あと、ドアの色は
background:#ddaaaa;
で指定しています。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
