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

49
index.html
View File

@ -208,22 +208,44 @@ h2[data-spy='true']
position: relative; position: relative;
height: 350px; height: 350px;
width: 350px; width: 350px;
margin-left: 60px; line-height:350px;
border: 1px solid blue; outline:1px solid blue;
perspective: 400px; perspective: 400px;
perspective-origin: 50% 50%; 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 .shot3d img
{ {
position:absolute; vertical-align: bottom;
bottom:0; display: inline;
left: 0; max-width: 100%;
right: 0; max-height: 100%;
margin:0 auto;
max-width:100%;
max-height:100%;
transform-style: preserve-3d;
} }
.shot3d::before .shot3d::before
@ -245,10 +267,9 @@ h2[data-spy='true']
<div class="shot3d"> <div class="shot3d">
<!-- <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"/> -->
<span> <div>
<img src="https://placekitten.com/800/400"/> <img src="https://placekitten.com/100/200"/>
<img src="https://placekitten.com/400/800"/> </div>
</span>
</div> </div>