SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

soft shadow

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-05 09:46:25 -04:00
parent 7d1d8a2be4
commit 4fd099931f
1 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
index.html
View File

@ -205,42 +205,46 @@ h2[data-spy='true']
<style>
.shot3d
{
position: relative;
height: 350px;
width: 350px;
line-height:350px;
outline:1px solid blue;
perspective: 400px;
transform: perspective(1000px) rotateY(25deg);
transform-style: preserve-3d;
perspective-origin: 50% 50%;
position: relative;
width: 350px;
height: 350px;
line-height: 350px;
text-align:center;
white-space: nowrap;
}
.shot3d div
.shot3d__shadow
{
vertical-align: bottom;
display: inline;
position: relative;
transform-style: preserve-3d;
outline: 1px solid #000;
font-size: 0px;
line-height:0;
vertical-align: bottom;
}
.shot3d div::after
.shot3d__shadow::after, .shot3d__shadow::before
{
transform-origin: center 30px;
position: absolute;
padding: 0 20px 0 20px;
padding: 0 6px 0 6px;
content: " ";
top: 100%;
left: -20px;
left: -6px;
width: 100%;
height: 20px;
background: #ff0;
opacity: 0.5;
height: 6px;
border-radius: 6px;
box-shadow: 0px 30px 14px black, 0px 43px 22px black, 0px 60px 33px black;
}
.shot3d img
.shot3d__shadow::before{ transform: translateY(-30px) rotateX(-90deg) translateY( 5px); }
.shot3d__shadow::after { transform: translateY(-30px) rotateX( 90deg) translateY( 5px); }
.shot3d__shadow img
{
vertical-align: bottom;
display: inline;
@ -248,27 +252,14 @@ h2[data-spy='true']
max-height: 100%;
}
.shot3d::before
{
position:absolute;
content:" ";
top:100%;
left:0%;
width:100%;
height:100px;
background:red;
transform-style: preserve-3d;
transform-origin: top center;
transform: rotateX(90deg) translateY(-50px);
}
</style>
<div class="shot3d">
<div class="shot3d__shadow">
<!-- <img src="https://truthforlife.org/static/images/productimage-picture-encore-2021-9729.jpg"/> -->
<div>
<img src="https://placekitten.com/100/200"/>
<img class="panel panel--front" src="https://placekitten.com/400/800"/>
</div>
</div>