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