Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example of a div which can flip its content
<div class="card-container">
<div class="card">
{#if flipped}
<div class="side" transition:turn>
<slot name="front"></slot>
</div>
{:else}
<div class="side back" transition:turn>
<slot name="back"></slot>
</div>
{/if}
</div>
</div>
<script>
let flipped = false
function turn(node, {
delay = 0,
duration = 500
}) {
return {
delay,
duration,
css: (t, u) => `
transform: rotateY(${1 - (u * 180)}deg);
opacity: ${1 - u};
`
};
}
export function flip () {
flipped = !flipped
}
</script>
<style>
.card-container {
position: relative;
height: 100%;
width: 100%;
}
.card {
width: 100%;
height: 100%;
position: absolute;
perspective: 600;
}
.side {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment