Skip to content

Instantly share code, notes, and snippets.

@marek-saji

marek-saji/dabblet.css

Last active March 6, 2016 23:17
Show Gist options
  • Save marek-saji/14803cd40f3fcbe20af3 to your computer and use it in GitHub Desktop.
Save marek-saji/14803cd40f3fcbe20af3 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
:root
{
box-sizing: border-box;
font-family: sans-serif;
}
*
{
box-sizing: inherit;
}
.item,
.item-language[lang=jp],
.item-language[lang=en]
{
margin: 0;
padding: 0;
}
.item
{
font-size: 2em;
width: 2em;
height: 2em;
justify-content: center;
margin: 0.1em;
transform-style: preserve-3d;
perspective: 4em;
position: relative;
}
.item-language[lang=jp],
.item-language[lang=en]
{
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
justify-content: space-around;
background: white;
border: #eee solid thin;
box-shadow: 0.05rem 0.05rem 0.1rem #666;
backface-visibility: hidden;
transition: all 0.75s ease-in-out;
}
.item-language[lang=jp]
{
transform: rotateY(0deg);
}
.item-language[lang=en]
{
transform: rotateY(180deg);
}
.item:hover .item-language[lang=jp]
{
transform: rotateY(180deg);
}
.item:hover .item-language[lang=en]
{
transform: rotateY(360deg);
}
Raw
dabblet.html
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=stylesheet type=text/css href=index.css>
<script src=index.js></script>
(╯°□°）╯︵ ┻━┻
<h1>Hiragana</h1>
<table>
<thead>
<th></th>
<th>a</th>
<th>i</th>
<th>u</th>
<th>e</th>
<th>o</th>
</thead>
<tr>
<th></th>
<td>
<dl class=item>
<dt class=item-language lang=jp>あ</dt>
<dd class=item-language lang=en>a</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>い</dt>
<dd class=item-language lang=en>i</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>う</dt>
<dd class=item-language lang=en>u</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>え</dt>
<dd class=item-language lang=en>e</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>お</dt>
<dd class=item-language lang=en>o</dd>
</dl>
</td>
</tr>
<tr>
<th>
k
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>か</dt>
<dd class=item-language lang=en>ka</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>き</dt>
<dd class=item-language lang=en>ki</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>く</dt>
<dd class=item-language lang=en>ku</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>け</dt>
<dd class=item-language lang=en>ke</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>こ</dt>
<dd class=item-language lang=en>ko</dd>
</dl>
</td>
</tr>
<tr>
<th>
s
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>さ</dt>
<dd class=item-language lang=en>sa</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>さ</dt>
<dd class=item-language lang=en>shi</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>す</dt>
<dd class=item-language lang=en>su</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>せ</dt>
<dd class=item-language lang=en>se</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>そ</dt>
<dd class=item-language lang=en>so</dd>
</dl>
</td>
</tr>
<tr>
<th>
t
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>た</dt>
<dd class=item-language lang=en>ta</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ち</dt>
<dd class=item-language lang=en>chi</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>つ</dt>
<dd class=item-language lang=en>tsu</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>て</dt>
<dd class=item-language lang=en>te</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>と</dt>
<dd class=item-language lang=en>to</dd>
</dl>
</td>
</tr>
<tr>
<th>
n
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>な</dt>
<dd class=item-language lang=en>na</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>に</dt>
<dd class=item-language lang=en>ni</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ぬ</dt>
<dd class=item-language lang=en>nu</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ね</dt>
<dd class=item-language lang=en>ne</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>の</dt>
<dd class=item-language lang=en>no</dd>
</dl>
</td>
</tr>
<tr>
<th>
h
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>は</dt>
<dd class=item-language lang=en>ha</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ひ</dt>
<dd class=item-language lang=en>chi</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ふ</dt>
<dd class=item-language lang=en>fu</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>へ</dt>
<dd class=item-language lang=en>he</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ほ</dt>
<dd class=item-language lang=en>ho</dd>
</dl>
</td>
</tr>
<tr>
<th>
m
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>ま</dt>
<dd class=item-language lang=en>ma</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>み</dt>
<dd class=item-language lang=en>mi</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>む</dt>
<dd class=item-language lang=en>mu</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>め</dt>
<dd class=item-language lang=en>me</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>も</dt>
<dd class=item-language lang=en>mo</dd>
</dl>
</td>
</tr>
<tr>
<th>
y
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>や</dt>
<dd class=item-language lang=en>ya</dd>
</dl>
</td>
<td></td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ゆ</dt>
<dd class=item-language lang=en>yu</dd>
</dl>
</td>
<td></td>
<td>
<dl class=item>
<dt class=item-language lang=jp>よ</dt>
<dd class=item-language lang=en>yo</dd>
</dl>
</td>
</tr>
<tr>
<th>
r
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>ら</dt>
<dd class=item-language lang=en>ra</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>り</dt>
<dd class=item-language lang=en>ri</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>る</dt>
<dd class=item-language lang=en>ru</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>れ</dt>
<dd class=item-language lang=en>re</dd>
</dl>
</td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ろ</dt>
<dd class=item-language lang=en>ro</dd>
</dl>
</td>
</tr>
<tr>
<th>
w
</th>
<td>
<dl class=item>
<dt class=item-language lang=jp>わ</dt>
<dd class=item-language lang=en>wa</dd>
</dl>
</td>
<td></td>
<td></td>
<td></td>
<td>
<dl class=item>
<dt class=item-language lang=jp>を</dt>
<dd class=item-language lang=en>o</dd>
</dl>
</td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td>
<dl class=item>
<dt class=item-language lang=jp>ん</dt>
<dd class=item-language lang=en>n</dd>
</dl>
</td>
<td></td>
<td></td>
</tr>
</table>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment