← All elements
<div class="ft"><div><b>A</b><b>1</b></div><div><b>B</b><b>2</b></div><div><b>C</b><b>3</b></div></div>About this hexagon
Three hexagon tiles that flip to reveal a second colour on hover, using 3D rotation inside a clip-path shape.
How it works
Each tile has a front and back face, both clipped into hexagons and stacked with backface-visibility hidden. The back face is rotated 180 degrees, and on hover the whole tile rotates 180 degrees around the Y axis inside a perspective parent, so the second colour and label appear.
Ways to customise it
- Change the two face gradients.
- Replace the letters and numbers with your own labels.
- Change the 0.6s flip duration.
Good to know
Hover does not exist on touch screens, so do not hide essential content on the back faces. Safari needs the same backface-visibility rule.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.