div.toblerone
div.toblerone__control
div.toblerone__choc
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__chocBridge
div.toblerone__chocBridgeTop
div.toblerone__chocBridgeBridge
div.toblerone__chocBridgeCenter
div.toblerone__chocBridgeBottom
div.toblerone__chocBridgeLeft
div.toblerone__chocBridgeRight
div.toblerone__chocPiece
div.toblerone__chocPieceTop
div.toblerone__chocPieceCenter
div.toblerone__chocPieceBottom
div.toblerone__chocPieceLeft
div.toblerone__chocPieceRight
div.toblerone__foil
div.toblerone__foilTop
div.toblerone__foilCenter
div.toblerone__foilBottom
div.toblerone__foilLeft
div.toblerone__packaging
div.toblerone__packagingTop
svg
use(href='#toblerone')
div.toblerone__packagingCenter
svg
use(href='#toblerone')
div.toblerone__packagingBottom
svg
use(href='#toblerone')
div.toblerone__packagingLeft
button#tobleroneReveal(data-released='false') Release the chocolate!
svg(xmlns='http://www.w3.org/2000/svg' style='display: none;')
symbol#toblerone(viewBox='0 0 305 60')
path(fill='var(--c-blue)' d='M64.88,15.96c7.86,0,14.26,6.53,14.26,14.54s-6.4,14.55-14.26,14.55-14.26-6.53-14.26-14.55,6.4-14.54,14.26-14.54h0ZM64.91,25.02c-2.74,0-5.02,2.37-5.02,5.27s2.27,5.3,5.02,5.3,5.05-2.37,5.05-5.3-2.27-5.27-5.05-5.27h0ZM205.44,15.96c7.86,0,14.26,6.53,14.26,14.54s-6.4,14.55-14.26,14.55-14.26-6.53-14.26-14.55,6.4-14.54,14.26-14.54h0ZM205.48,25.02c-2.74,0-5.02,2.37-5.02,5.27s2.27,5.3,5.02,5.3,5.05-2.37,5.05-5.3-2.27-5.27-5.05-5.27h0ZM253.18,16.44c.69.88,1.42,2.74,1.42,3.85v19.25c0,1.83-.63,3.72-1.42,4.92h21.49v-10.63c-1.17.66-2.97,1.42-4.76,1.42h-6.34v-2.33h7.48v-6.97h-7.48v-2.24h6.34c1.51,0,2.9.51,4.13,1.07v-8.33h-20.86ZM137.51,16.44c.66.88,1.42,2.74,1.42,3.85v19.25c0,1.83-.66,3.72-1.42,4.92h21.49v-10.63c-1.17.66-2.97,1.42-4.8,1.42h-6.31v-2.33h7.48v-6.97h-7.48v-2.24h6.31c1.55,0,2.93.51,4.13,1.07v-8.33h-20.82ZM26.55,11.42v8.58h7.29v25.71c0,1.67-.66,3.06-1.39,4.29h13.16c-.76-1.45-1.36-2.87-1.36-4.29v-25.71h6.5v-8.58s-24.2,0-24.2,0ZM222.92,16.56c.85,1.48,1.32,2.97,1.32,4.48v19.31c0,1.48-.76,2.93-1.32,4.2h11.26c-.79-1.26-1.42-2.68-1.42-4.2v-6.85l6.59,11.04h8.61v-23.51c0-1.55.57-3.03,1.17-4.48h-11.26c.95,1.39,1.48,2.78,1.48,4.48v6.56l-6.59-11.04h-9.84ZM112.3,16.91c.76,1.45,1.32,2.78,1.32,4.29v19.31c0,1.51-.22,2.93-1.32,4.32h21.23v-10.89c-.98.85-2.15,1.58-3.41,1.58h-7.19v-14.32c0-1.48.41-2.84,1.2-4.29h-11.83,0ZM163.45,16.69h13.88c11.96,0,10.76,11.61,6.5,13.91,2.62,2.93,4.67,6.4,6.41,10.41.73,1.39,1.48,2.56,2.3,3.63h-13.35c.38-1.07.76-2.33.41-3.63-1.23-4.7-3.28-7.35-5.65-7.48v7.48c0,1.29.57,2.56,1.23,3.63h-11.74c.88-1.04,1.51-2.33,1.51-3.63v-20.86c0-1.36-.63-2.4-1.51-3.47h0ZM173.2,23.44v2.27h3.34v-2.27h-3.34ZM82.24,16.78c.76,1.48,1.26,2.78,1.26,4.23v19.59c0,1.48-.57,2.93-1.26,4.23h17.29c10.88,0,10.82-13.66,5.74-16.09,3.31-5.05.79-11.96-8.05-11.96h-14.99.01ZM91.89,32.88h5.65c2.81,0,2.81,4.32,0,4.32h-5.65v-4.32h0ZM91.89,23.69h4.54c2.59,0,2.59,3.22,0,3.22h-4.54v-3.22h0Z')
path(fill='var(--c-gold)' d='M62.8,14.83c7.86,0,14.26,6.56,14.26,14.58s-6.4,14.55-14.26,14.55-14.26-6.53-14.26-14.55,6.4-14.58,14.26-14.58h0ZM62.86,23.88c-2.78,0-5.05,2.4-5.05,5.3s2.27,5.27,5.05,5.27,5.02-2.37,5.02-5.27-2.27-5.3-5.02-5.3h0ZM203.36,14.83c7.86,0,14.26,6.56,14.26,14.58s-6.4,14.55-14.26,14.55-14.26-6.53-14.26-14.55,6.41-14.58,14.26-14.58h0ZM203.42,23.88c-2.78,0-5.05,2.4-5.05,5.3s2.27,5.27,5.05,5.27,5.02-2.37,5.02-5.27-2.27-5.3-5.02-5.3h0ZM250.94,15.18c.69.88,1.42,2.75,1.42,3.82v19.28c0,1.83-.63,3.72-1.42,4.92h21.49v-10.66c-1.17.69-2.93,1.42-4.76,1.42h-6.34v-2.3h7.51v-6.97h-7.51v-2.27h6.34c1.51,0,2.9.51,4.13,1.1v-8.33h-20.86ZM135.27,15.18c.69.88,1.42,2.75,1.42,3.82v19.28c0,1.83-.63,3.72-1.42,4.92h21.49v-10.66c-1.17.69-2.97,1.42-4.76,1.42h-6.34v-2.3h7.48v-6.97h-7.48v-2.27h6.34c1.51,0,2.9.51,4.1,1.1v-8.33h-20.83ZM24.31,10v8.55h7.29v25.71c0,1.67-.66,3.09-1.39,4.29h13.16c-.76-1.42-1.36-2.84-1.36-4.29v-25.71h6.5v-8.55s-24.2,0-24.2,0ZM220.84,15.11c.85,1.51,1.32,2.97,1.32,4.48v19.31c0,1.48-.76,2.97-1.32,4.2h11.26c-.79-1.23-1.39-2.65-1.39-4.2v-6.85l6.56,11.04h8.61v-23.51c0-1.51.57-3,1.2-4.48h-11.3c.95,1.42,1.48,2.78,1.48,4.48v6.59l-6.56-11.07h-9.88.02ZM110.06,15.3c.76,1.48,1.33,2.81,1.33,4.29v19.31c0,1.51-.22,2.97-1.33,4.32h21.23v-10.89c-.98.85-2.15,1.58-3.38,1.58h-7.23v-14.32c0-1.48.44-2.81,1.23-4.29h-11.86.01ZM161.05,15.24h14.2c11.96,0,10.76,11.61,6.5,13.95,2.62,2.9,4.35,6.37,6.09,10.38.73,1.39,1.48,2.56,2.3,3.66h-13.35c.38-1.1.76-2.33.41-3.66-1.23-4.7-3.28-7.32-5.65-7.48v7.48c0,1.29.57,2.56,1.23,3.66h-11.74c.88-1.07,1.51-2.37,1.51-3.66v-20.86c0-1.36-.63-2.37-1.51-3.47h.01ZM171.02,22.02v3.31h4.07c1.55,0,1.55-3.31,0-3.31h-4.07ZM80.34,15.18c.76,1.48,1.23,2.78,1.23,4.26v19.56c0,1.48-.54,2.97-1.23,4.23h17.26c10.89,0,10.82-13.66,5.74-16.06,3.34-5.08.82-11.99-8.05-11.99h-14.96.01ZM89.97,31.27h5.65c2.81,0,2.81,4.32,0,4.32h-5.65v-4.32h0ZM89.97,22.09h4.54c2.59,0,2.59,3.25,0,3.25h-4.54v-3.25h0Z')
path(fill='var(--c-red)' d='M62.8,16.34c7.04,0,12.78,5.87,12.78,13.06s-5.74,13.03-12.78,13.03-12.78-5.87-12.78-13.03,5.74-13.06,12.78-13.06h0ZM62.86,22.43c-3.53,0-6.4,3.03-6.4,6.75s2.87,6.72,6.4,6.72,6.37-3.03,6.37-6.72-2.87-6.75-6.37-6.75h0ZM203.36,16.34c7.04,0,12.78,5.87,12.78,13.06s-5.74,13.03-12.78,13.03-12.78-5.87-12.78-13.03,5.74-13.06,12.78-13.06h0ZM203.42,22.43c-3.53,0-6.41,3.03-6.41,6.75s2.87,6.72,6.41,6.72,6.4-3.03,6.4-6.72-2.9-6.75-6.4-6.75h0ZM259.95,30.29h7.7v-4.26h-7.7v-4.99h7.7c.98,0,1.89.35,2.9.73v-5.05h-17.38c.38.76.73,1.48.73,2.27v20.57c0,.79-.35,1.51-.73,2.27h17.89v-7.48c-1.1.5-2.24.88-3.41.88h-7.7v-4.95h0ZM144.3,30.29h7.7v-4.26h-7.7v-4.99h7.7c.98,0,1.89.35,2.9.73v-5.05h-17.38c.38.76.73,1.48.73,2.27v20.57c0,.79-.35,1.51-.73,2.27h17.89v-7.48c-1.1.5-2.24.88-3.41.88h-7.7v-4.95h0ZM25.7,11.29v5.65h7.41v27.32c0,1.2-.28,2.21-1.01,3h9.56c-.69-.76-1.1-1.8-1.1-3v-27.32h6.56v-5.65s-21.42,0-21.42,0ZM222.8,16.37c.54,1.01.92,2.15.92,3.22v19.31c0,1.17-.25,2.05-.79,2.97h7.29c-.47-.76-.73-1.77-.73-2.97v-11.55l8.3,14.51h6.56v-22.28c0-1.07.38-2.21.98-3.22h-7.54c.41,1.07.76,2.11.76,3.22v11.48l-8.33-14.7h-7.42ZM112.3,16.78c.41.88.73,1.77.73,2.81v19.31c0,1.04-.19,2.08-.57,2.97h17.64v-7.51c-.54.66-1.39.85-2.18.85h-8.55v-15.62c0-.92.25-1.89.66-2.81,0,0-7.73,0-7.73,0ZM175.25,16.53h-11.96c.44.66.79,1.42.79,2.18v20.86l-.79,2.27h7.73c-.57-.63-.98-1.42-.98-2.27v-9.12c5.21,0,8.14,5.27,8.68,9.12.13.91.16,1.39-.16,2.27h9.06c-.6-.73-1.01-1.48-1.32-2.27-2.15-5.27-4.48-9.06-6.94-10.38,6.91-3.85,5.36-12.65-4.1-12.65h0ZM169.89,20.85h5.21c3.31,0,3.31,5.62,0,5.62h-5.21v-5.62h0ZM82.27,16.66c.66,1.33.85,3,.85,4.32v18.02c0,1.32-.25,1.67-.85,2.81h15.33c8.61,0,10.54-12.12,3.82-14.14,3.69-3.5,3.19-11.01-6.12-11.01,0,0-13.03,0-13.03,0ZM88.89,30.16h7.1c3.66,0,3.66,6.37,0,6.37h-7.1v-6.37h0ZM88.89,20.98h5.93c3.6,0,3.6,5.46,0,5.46h-5.93v-5.46h0Z')
path(fill='var(--c-gold)' d='M278.79,14.23c-.54,0-.98.19-1.32.54-.38.38-.6.85-.6,1.36s.22.98.57,1.33c.35.38.85.6,1.36.6.47,0,.95-.22,1.32-.57.38-.35.57-.82.57-1.36,0-.5-.19-.95-.54-1.33-.38-.38-.85-.57-1.36-.57h0ZM278.79,14.51c.44,0,.82.16,1.14.47.32.32.47.73.47,1.17s-.16.82-.47,1.14c-.32.28-.73.47-1.17.47-.41,0-.82-.19-1.14-.5-.28-.28-.47-.69-.47-1.14,0-.41.19-.82.5-1.14.32-.32.69-.47,1.14-.47h0ZM278.01,15.05h.82c.6,0,.88.19.88.57,0,.32-.16.5-.44.6l.44.95h-.51l-.41-.88h-.32v.88h-.47v-2.11h.01ZM278.48,15.33h.25c.35,0,.54.09.54.35,0,.22-.16.32-.5.32h-.28v-.66h-.01Z')
:root {
/* Colors. */
--c-chocolate: oklch(37% 0.06 33deg);
--c-foil: oklch(90% 0.01 0deg);
--c-packaging: oklch(90% 0.07 82deg);
--c-blue: oklch(45% 0.15 257deg);
--c-gold: oklch(65% 0.08 74deg);
--c-red: oklch(54% 0.18 24deg);
}
body {
align-items: center;
background-color: color-mix(in oklch, var(--c-packaging), oklch(100% 0 0deg));
background-image: url("https://www.transparenttextures.com/patterns/vintage-speckles.png");
display: grid;
font-family: "Mochiy Pop One", sans-serif;
margin: 0;
min-block-size: 100dvh;
}
button {
background-color: var(--c-chocolate);
background-image: url("https://www.transparenttextures.com/patterns/vintage-speckles.png");
border: 0;
border-radius: 1rem;
color: var(--c-packaging);
cursor: pointer;
font-family: inherit;
font-weight: 900;
inset: auto auto 3rem 50%;
padding: 1rem 2rem;
position: absolute;
text-transform: uppercase;
transition: background-color 0.1s ease-in-out;
translate: -50% 0;
}
button:hover {
background-color: color-mix(in oklch, var(--c-chocolate), oklch(0% 0 0deg));
}
.toblerone {
container-type: inline-size;
}
.toblerone__control {
/* Multiplier. */
--m: 0.15cqw;
/* Toblerone chocolate. */
--tc-l: calc(299 * var(--m));
--tc-w: calc(54 * var(--m));
--tc-bh: calc(var(--tc-w) / 3);
--tc-pl: calc(var(--tc-l) / 25);
--tc-bl: calc(var(--tc-pl) * 2);
--tc-h: calc((var(--tc-w) * sqrt(3)) / 2);
--tc-bbh: calc(var(--tc-w) - ((2 * var(--tc-bh)) * cos(60deg)));
/* Toblerone foil. */
--tf-l: calc(301 * var(--m));
--tf-w: calc(56 * var(--m));
--tf-h: calc((var(--tf-w) * sqrt(3)) / 2);
/* Toblerone packaging. */
--tp-l: calc(305 * var(--m));
--tp-w: calc(60 * var(--m));
--tp-h: calc((var(--tp-w) * sqrt(3)) / 2);
block-size: var(--tp-w);
cursor: all-scroll;
display: grid;
margin-inline: auto;
inline-size: var(--tp-l);
place-content: center;
position: relative;
transform-origin: center center calc((var(--tp-w) / 3) * -1);
transform-style: preserve-3d;
}
.toblerone__control * {
grid-area: 1 / 1;
transform-style: preserve-3d;
}
/* Choc wrapper. */
.toblerone__choc {
align-items: center;
block-size: var(--tc-w);
display: flex;
justify-content: center;
inline-size: var(--tc-l);
transition:
rotate 1s ease-in-out 1s,
transform 1s ease-in-out 0s,
translate 1s ease-in-out 2s;
translate: 20% 0 0;
}
.mReleased .toblerone__choc {
rotate: 0 0 1 -90deg;
transform: translate3d(0, -250%, 0);
transition:
rotate 1s ease-in-out 1s,
transform 1s ease-in-out 2s,
translate 1s ease-in-out 0s;
translate: 80% 0 0;
}
.toblerone__choc > * {
flex: 0 0 auto;
}
/* Choc pieces and bridges. */
.toblerone__chocPiece,
.toblerone__chocBridge {
block-size: var(--tc-w);
position: relative;
}
.toblerone__chocPiece {
inline-size: var(--tc-pl);
}
.toblerone__chocBridge {
inline-size: var(--tc-bl);
}
.toblerone__chocPiece *,
.toblerone__chocBridge * {
background-color: var(--c-chocolate);
background-image: url("https://www.transparenttextures.com/patterns/vintage-speckles.png");
background-size: calc(50 * var(--m));
box-shadow: inset 0 0 calc(15 * var(--m)) 0 oklch(0% 0 0deg / 20%);
inset: 0;
position: absolute;
}
.toblerone__chocPieceTop,
.toblerone__chocPieceCenter,
.toblerone__chocPieceBottom,
.toblerone__chocPieceLeft,
.toblerone__chocPieceRight,
.toblerone__chocBridgeTop,
.toblerone__chocBridgeCenter,
.toblerone__chocBridgeBottom {
block-size: var(--tc-w);
}
.toblerone__chocPieceTop,
.toblerone__chocPieceCenter,
.toblerone__chocPieceBottom {
inline-size: var(--tc-pl);
}
.toblerone__chocBridgeTop,
.toblerone__chocBridgeCenter,
.toblerone__chocBridgeBottom {
inline-size: var(--tc-bl);
}
.toblerone__chocBridgeTop,
.toblerone__chocBridgeBottom {
block-size: var(--tc-bh);
}
.toblerone__chocPieceTop,
.toblerone__chocBridgeTop {
inset-block: auto 100%;
rotate: 1 0 0 120deg;
transform-origin: center bottom;
}
.toblerone__chocBridgeBridge {
block-size: var(--tc-bbh);
inline-size: 100%;
inset: auto 0 100% 0;
position: absolute;
rotate: 1 0 0 60deg;
transform-origin: center bottom;
}
.toblerone__chocBridgeBridge::after {
background:
linear-gradient(
to right,
transparent 47%,
oklch(0% 0 0deg / 10%) 49%,
oklch(0% 0 0deg / 10%) 51%,
transparent 53%
);
content: '';
inset: 0;
position: absolute;
}
.toblerone__chocPieceBottom,
.toblerone__chocBridgeBottom {
inset-block: 100% auto;
rotate: 1 0 0 -120deg;
transform-origin: center top;
}
.toblerone__chocPieceLeft,
.toblerone__chocPieceRight {
inline-size: var(--tc-h);
}
.toblerone__chocPieceLeft {
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
inset-inline: auto 100%;
rotate: 0 1 0 -90deg;
transform-origin: right center;
}
.toblerone__chocPieceRight {
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
inset-inline: 100% auto;
rotate: 0 1 0 90deg;
transform-origin: left center;
}
/* Foil wrapper. */
.toblerone__foil {
block-size: var(--tf-w);
inline-size: var(--tf-l);
transition:
rotate 1s ease-in-out 1s,
transform 1s ease-in-out 0s,
translate 1s ease-in-out 2s;
translate: 15% calc(-1 * var(--m)) calc(1 * var(--m));
}
.mReleased .toblerone__foil {
rotate: 0 0 1 -90deg;
transform: translate3d(0, 266%, 0);
transition:
rotate 1s ease-in-out 1s,
transform 1s ease-in-out 2s,
translate 1s ease-in-out 0s;
translate: -60% calc(-1 * var(--m)) calc(1 * var(--m));
}
.toblerone__foil > * {
background-color: var(--c-foil);
background-image: url("https://www.transparenttextures.com/patterns/paper-2.png");
box-shadow: inset 0 0 calc(15 * var(--m)) 0 oklch(0% 0 0deg / 20%);
inset: 0;
position: absolute;
}
.toblerone__foilTop,
.toblerone__foilCenter,
.toblerone__foilBottom {
block-size: var(--tf-w);
clip-path: polygon(0% 0%, 75% 0, 77% 8%, 78% 15%, 77% 25%, 74% 31%, 75% 37%, 77% 46%, 73% 55%, 76% 60%, 74% 67%, 77% 71%, 78% 75%, 77% 79%, 76% 83%, 77% 87%, 76% 93%, 73% 96%, 75% 100%, 0 100%);
inline-size: var(--tf-l);
}
.toblerone__foilTop {
inset-block: auto 100%;
rotate: 1 0 0 120deg;
transform-origin: center bottom;
}
.toblerone__foilBottom {
inset-block: 100% auto;
rotate: 1 0 0 -120deg;
transform-origin: center top;
}
.toblerone__foilLeft {
block-size: var(--tf-w);
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
inline-size: var(--tf-h);
inset-inline: auto 100%;
rotate: 0 1 0 -90deg;
transform-origin: right center;
}
/* Packaging wrapper. */
.toblerone__packaging {
block-size: var(--tp-w);
inline-size: var(--tp-l);
translate: -20% calc(-3 * var(--m)) calc(1.5 * var(--m));
transition:
rotate 1s ease-in-out 1s,
transform 1s ease-in-out 0s,
translate 1s ease-in-out 2s;
}
.mReleased .toblerone__packaging {
rotate: 0 0 1 -90deg;
transform: translate3d(0, 250%, 0);
transition:
rotate 1s ease-in-out 1s,
transform 1s ease-in-out 2s,
translate 1s ease-in-out 0s;
translate: -60% calc(-3 * var(--m)) calc(1.5 * var(--m));
}
.toblerone__packaging > * {
background-color: var(--c-packaging);
box-shadow: inset 0 0 calc(15 * var(--m)) 0 oklch(0% 0 0deg / 20%);
inset: 0;
position: absolute;
}
.toblerone__packagingTop,
.toblerone__packagingCenter,
.toblerone__packagingBottom {
block-size: var(--tp-w);
inline-size: var(--tp-l);
}
.toblerone__packagingTop::after,
.toblerone__packagingCenter::after,
.toblerone__packagingBottom::after {
background-color: color-mix(in oklch, var(--c-packaging) 75%, oklch(100% 0 0deg));
box-shadow: inset 0 0 calc(15 * var(--m)) 0 oklch(0% 0 0deg / 20%);
content: '';
inset: 0;
position: absolute;
rotate: 0 1 0 180deg;
translate: 0 0 calc(-0.1 * var(--m));
}
.toblerone__packagingTop > *,
.toblerone__packagingCenter > *,
.toblerone__packagingBottom > * {
block-size: 100%;
inline-size: 100%;
}
.toblerone__packagingTop {
inset-block: auto 100%;
rotate: 1 0 0 120deg;
transform-origin: center bottom;
}
.toblerone__packagingBottom {
inset-block: 100% auto;
rotate: 1 0 0 -120deg;
transform-origin: center top;
}
.toblerone__packagingLeft {
block-size: var(--tp-w);
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
inline-size: var(--tp-h);
inset-inline: auto 100%;
rotate: 0 1 0 -90deg;
transform-origin: right center;
}
.toblerone__packagingLeft svg {
backface-visibility: hidden;
block-size: var(--tp-h);
inline-size: var(--tp-w);
inset: 50% auto auto 50%;
rotate: 0 0 1 -90deg;
translate: -50% -50%;
position: absolute;
}
const toblerone = document.querySelector('.toblerone__control');
let isDragging = false;
let previousX = 0;
let previousY = 0;
let rotateX = -100;
let rotateY = -35;
let velocityX = 0;
let velocityY = 0;
let autoRotate = true;
function animate() {
if (autoRotate) {
rotateY += 0.1;
} else {
rotateX -= velocityY;
rotateY += velocityX;
// Apply friction.
velocityX *= 0.95;
velocityY *= 0.95;
// Stop completely if velocity is low.
if (Math.abs(velocityX) < 0.001 && Math.abs(velocityY) < 0.001) {
velocityX = 0;
velocityY = 0;
}
}
toblerone.style.transform = `rotateX(${rotateX}deg) rotateZ(${rotateY}deg)`;
requestAnimationFrame(animate);
}
// Mouse events.
toblerone.addEventListener('mousedown', (e) => {
isDragging = true;
autoRotate = false;
previousX = e.clientX;
previousY = e.clientY;
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = e.clientX - previousX;
const deltaY = e.clientY - previousY;
velocityX = deltaX * 0.1;
velocityY = deltaY * 0.1;
rotateY += velocityX;
rotateX -= velocityY;
previousX = e.clientX;
previousY = e.clientY;
});
window.addEventListener('mouseup', () => {
isDragging = false;
autoRotate = true;
});
// Touch events.
toblerone.addEventListener('touchstart', (e) => {
isDragging = true;
autoRotate = false;
previousX = e.touches[0].clientX;
previousY = e.touches[0].clientY;
});
toblerone.addEventListener('touchmove', (e) => {
const deltaX = e.touches[0].clientX - previousX;
const deltaY = e.touches[0].clientY - previousY;
velocityX = deltaX * 0.1;
velocityY = deltaY * 0.1;
rotateY += velocityX;
rotateX -= velocityY;
previousX = e.touches[0].clientX;
previousY = e.touches[0].clientY;
});
toblerone.addEventListener('touchend', () => {
isDragging = false;
autoRotate = true;
});
// Start animation loop.
requestAnimationFrame(animate);
const btn = document.getElementById('tobleroneReveal');
const releaseTheChoc = 'Release the chocolate!';
const putChocBack = 'Put the chocolate back!';
btn.addEventListener('click', (e) => {
const chocReleased = btn.dataset.released === 'true';
toblerone.classList.toggle('mReleased');
btn.dataset.released = chocReleased ? 'false' : 'true';
btn.innerText = chocReleased ? releaseTheChoc : putChocBack;
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.