diedVIPs

html knowhow

3D-Iframes schräg









3D-Iframes schräg

So sieht´s aus




Quellcode
<html>
<head>

<style type="text/css">
.grid {position: relative; width: auto; transform: rotateX(40deg) rotateZ(-3deg);transform-style: preserve-3d;}
.grid li {height: 400px; width: 225px;float: left; margin: 20px; list-style-type: none; background-size: 0, cover; transform-style: preserve-3d;}
.grid li:before, .grid li:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit;background-size: cover;}
.grid li:before {transform-origin: left center; transform: rotateY(90deg);width: 5px;}
.grid li:after {transform-origin: bottom center;transform: rotateX(90deg);height: 5px; top: auto; bottom: 0; background-position: bottom center;}
.s {position: absolute; top: 30px; left: 30px; right: 30px; bottom: 30px; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.5); transform: translateZ(-50px);}
.one {background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); }
.two {background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}
.three {background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}
.four {background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}
iframe {border: none; transform: scale(0.703125); transform-origin: 0 0; background-color: #fff;}
</style>
</head>

<body >
<ul class="grid">
<li class="one"> <iframe src="../Datenschutz.html" width="320" height="568" target="_self"></iframe><span class="s"></span></li>
<li class="two"> <iframe src="../Kontakt.html" width="320" height="568" target="_self"></iframe><span class="s"></span></li>
<li class="three"><iframe src="../Impressum.html" width="320" height="568" target="_self"></iframe><span class="s"></span></li>
<li class="Four"> <iframe src="../Begriffserklaerung.html" width="320" height="568" target="_self"></iframe><span class="s"></span></li>
</ul>
</body>

</html>