Beispiel:CSS3 transform-perspective-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>25 Jahre SELFHTML</title>
<style>
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
gap: 1em;
max-width: 85em;
}
h1, footer {
grid-column: 1 / -1;
}
.flip-card {
width: 250px;
height: 250px;
perspective: 500px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.2);
}
ul {text-align: start;}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
border: thin solid black;
padding: 0em;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #e6f2f7;
}
.flip-card-front img {
width: 159px;
height: auto;
background-color: #fff;
}
.classic {
background-color: #eee;
}
.classic img {
background: transparent;
}
.flip-card-back {
background-color: #337599;
color: white;
transform: rotateY(180deg);
overflow: hidden;
}
.flip-card-back a {
color: #e6f2f7;
}
#valentine {
color: #8db243;
transform: rotate(-0.25turn);
font-size: 2em;
font-weight: bold;
}
#valentine span {
color: #c82f04;
}
</style>
</head>
<body>
<h1>25 Jahre SELFHTML (1995 - 2020)</h1>
<div id="1" class="flip-card">
<div class="flip-card-inner">
<div class=" classic flip-card-front">
<h2>1995</h2>
<img src="https://wiki.selfhtml.org/images/8/87/Selfhtml-logo.gif" alt="SELF-Logo-vintage" >
</div>
<div class="flip-card-back">
<h2>est. 1995</h2>
<p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt">Wie alles begann – Stefan Münz erzählt</a></p>
<p>In einer Kneipe namens Forum hört Stefan Münz von <b>Word Wibe Web</b> und <b>HTML</b>.</p>
<p>Da es keine Doku dazu gibt, schreibt er halt eine!</p>
</div>
</div>
</div>
<div id="2" class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>2020</h2>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="SELF-Logo">
</div>
<div class="flip-card-back">
<h2>nach 25 Jahren</h2>
<ul>
<li>Doku (1995-2015)</li>
<li>Forum (seit 1998)</li>
<li>Wiki (seit 2010)</li>
<li>Blog (seit 2007)</li>
<li><b>Verein</b> (seit 2004)</li>
</ul>
</div>
</div>
</div>
<div id="3" class="flip-card">
<div class="flip-card-inner">
<div class="classic flip-card-front">
<h2>Dezember</h2>
<img src="https://wiki.selfhtml.org/images/0/01/Selfhtml-logo-Weihnachten.png" alt="Weihnachten" >
</div>
<div class="flip-card-back">
<h2>Adventskalender</h2>
<ul>
<li><a href="http://selfspezial.atomic-eggs.com/advent/1999/adv_1999.html">Adventskalender 1999</a></li>
<li><a href="http://selfspezial.atomic-eggs.com/advent/2001/adv_2001.html">Adventskalender 2001</a></li>
<li><a href="http://web.archive.org/web/20070107051129/http://community.de.selfhtml.org/advent/2003/">Adventskalender 2003</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz#Das_fertige_Quiz">Weihnachtsquiz 2016</a></li>
<li><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Advent-2017.html">Adventskalender 2017</a></li>
<li><a href="https://blog.selfhtml.org/2019/12/01/adventskalender-2019/">Adventskalender 2019</a></li>
</ul>
</div>
</div>
</div>
<div id="4" class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>2010</h2>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="SELF-Logo" >
</div>
<div class="flip-card-back">
<h2>Das Wiki startet</h2>
<p>heute:</p>
<ul>
<li>2877 Seiten</li>
<li>70.888 Bearbeitungen</li>
<li>7.49 Revisionen / Seite</li>
<li> ...</li>
</ul>
</div>
</div>
</div>
<div id="5" class="flip-card">
<div class="flip-card-inner">
<div class="classic flip-card-front">
<h2>1999</h2>
<img src="https://wiki.selfhtml.org/images/8/87/Selfhtml-logo.gif" alt="SELF-Logo-vintage" >
</div>
<div class="flip-card-back">
<h2>Schliersee 1999</h2>
<p>erstes Treffen am <a href="http://selfspezial.atomic-eggs.com/artik002.html">Schliersee</a> mit 26 Selfern in einem Hotel!<br><img src="http://selfspezial.atomic-eggs.com/sss/ximap.jpg" alt="Gruppenbild Schliersee" width="250"></p>
</div>
</div>
</div>
<div id="6" class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>2012</h2>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="SELF-Logo">
</div>
<div class="flip-card-back">
<h2>Ist SELFHTML tot?</h2>
<p>Nach einer turbulenten Zeit, in der der Tod des Vereins zu fürchten ist, übernimmt Matthias Apsel das Ruder und beruhigt die Wellen.</p> </div>
</div>
</div>
<div id="7" class="flip-card">
<div class="flip-card-inner">
<div class="classic flip-card-front">
<h2>2004</h2>
<img src="https://wiki.selfhtml.org/images/7/74/Self-logo-2004.png" alt="SELF-Logo-vintage" >
</div>
<div class="flip-card-back">
<h2>Valentin</h2>
<p id="valentine">--<--<--<span>@</span> </p>
</div>
</div>
</div>
<div id="8" class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>2016</h2>
<img src="https://wiki.selfhtml.org/images/3/39/Selfhtml-s-twitter-blue-beanie.png" alt="SELF-Logo">
</div>
<div class="flip-card-back">
<h2>Blue Beanie Day</h2>
<p>Seit 2016 beteiligt sich SELFHTML am <a href="https://wiki.selfhtml.org/wiki/Blue_Beanie_Day">Blue Beanie Day</a>.</p> </div>
</div>
</div>
<div id="9" class="flip-card">
<div class="flip-card-inner">
<div class="classic flip-card-front">
<h2>2008</h2>
<img src="https://wiki.selfhtml.org/images/5/5a/Self-logo-2008.png" alt="10-Jahre Forum" >
</div>
<div class="flip-card-back">
<h2>Forum (1998)</h2>
<p>der erste Post: <a href="https://forum.selfhtml.org/self/1998/jul/26/willkommen-im-forum/1#m1">Willkommen im Forum!</a><br>(nur 2 Bewertungen?)</p>
<ul>
<li><a href="http://selfspezial.atomic-eggs.com/jubilee.html">Happy Birthday, Forum! (1999)</a></li>
<li><a href="https://blog.selfhtml.org/2008/07/26/forum-jubilaeum/">Ten Years after - Rückblick im Blog</a></li>
</ul>
</div>
</div>
</div>
<div id="10" class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>2004</h2>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="SELF-Logo" >
</div>
<div class="flip-card-back">
<h2>Vereinsgründung</h2>
<p>In Dortmund wird der SELFHTML e.V gegründet.</p>
<p>Vorsitzende: </p>
<ul>
<li>Stefan Münz (2004- 2007)</li>
<li>Sven Rautenberg (2007-2012)</li>
<li>Matthias Apsel (2012 - 2021)</li>
</div>
</div>
</div>
<div id="11" class="flip-card">
<div class="flip-card-inner">
<div class=" classic flip-card-front">
<h2>2007</h2>
<img src="https://wiki.selfhtml.org/images/8/87/Selfhtml-logo.gif" alt="SELF-Logo-vintage" >
</div>
<div class="flip-card-back">
<h2>die letzte Ausgabe der Doku</h2>
<p><img src="https://wiki.selfhtml.org/images/5/56/Doku-2007-Screenshot.png" alt="screenshot der alten Doku" width="250"></p>
</div>
</div>
</div>
<div id="12" class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>2001</h2>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="SELF-Logo">
</div>
<div class="flip-card-back">
<h2>Doku japanisch!</h2>
<p><img src="https://wiki.selfhtml.org/images/0/07/Doku-japanisch.png" width="250" alt="screenshot"></p>
<p>2001 gab es die Doku in Englisch, Französisch, Spanisch und Japanisch!</p>
</div>
</div>
</div>
<footer>
<h2>Siehe auch</h2>
<ul>
<li>Zurück zum Wiki-Tutorial <a href="https://wiki.selfhtml.org/wiki/Transform/3D-Transforms">CSS-Transforms</a></li>
<li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik">SELFHTML:Verein/Chronik</a></li>
<li>SELF-Blog: <a href="https://blog.selfhtml.org/2020/10/17/quadratisch-praktisch-gut/">Quadratisch, praktisch, gut! 25 Jahre SELFHTML in Mannheim (2020)</a></li>
</ul>
</footer>
</body>
</html>
