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

alignments perfect

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-04 17:53:51 -04:00
parent 371b49e460
commit 7d1d8a2be4
1 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -208,22 +208,44 @@ h2[data-spy='true']
position: relative;
height: 350px;
width: 350px;
margin-left: 60px;
border: 1px solid blue;
line-height:350px;
outline:1px solid blue;
perspective: 400px;
perspective-origin: 50% 50%;
text-align:center;
white-space: nowrap;
}
.shot3d div
{
vertical-align: bottom;
display: inline;
position: relative;
transform-style: preserve-3d;
outline: 1px solid #000;
font-size: 0px;
line-height:0;
}
.shot3d div::after
{
position: absolute;
padding: 0 20px 0 20px;
content: " ";
top: 100%;
left: -20px;
width: 100%;
height: 20px;
background: #ff0;
opacity: 0.5;
}
.shot3d img
{
position:absolute;
bottom:0;
left: 0;
right: 0;
margin:0 auto;
vertical-align: bottom;
display: inline;
max-width: 100%;
max-height: 100%;
transform-style: preserve-3d;
}
.shot3d::before
@ -245,10 +267,9 @@ h2[data-spy='true']
<div class="shot3d">
<!-- <img src="https://truthforlife.org/static/images/productimage-picture-encore-2021-9729.jpg"/> -->
<span>
<img src="https://placekitten.com/800/400"/>
<img src="https://placekitten.com/400/800"/>
</span>
<div>
<img src="https://placekitten.com/100/200"/>
</div>
</div>