Chronologie de la roue - CSS pur

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 May 2025

<div class="cards-container">
        <ul class="cards" style="--items: 26;">
            <li style="--i: 0;">
                <input type="radio" id="item-0" name="gallery-item" checked>
                <label for="item-0">2000</label>
                <h2>2000</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 1;">
                <input type="radio" id="item-1" name="gallery-item">
                <label for="item-1">2001</label>
                <h2>2001</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 2;">
                <input type="radio" id="item-2" name="gallery-item">
                <label for="item-2">2002</label>
                <h2>2002</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 3;">
                <input type="radio" id="item-3" name="gallery-item">
                <label for="item-3">2003</label>
                <h2>2003</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 4;">
                <input type="radio" id="item-4" name="gallery-item">
                <label for="item-4">2004</label>
                <h2>2004</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 5;">
                <input type="radio" id="item-5" name="gallery-item">
                <label for="item-5">2005</label>
                <h2>2005</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 6;">
                <input type="radio" id="item-6" name="gallery-item">
                <label for="item-6">2006</label>
                <h2>2006</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 7;">
                <input type="radio" id="item-7" name="gallery-item">
                <label for="item-7">2007</label>
                <h2>2007</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 8;">
                <input type="radio" id="item-8" name="gallery-item">
                <label for="item-8">2008</label>
                <h2>2008</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 9;">
                <input type="radio" id="item-9" name="gallery-item">
                <label for="item-9">2009</label>
                <h2>2009</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 10;">
                <input type="radio" id="item-10" name="gallery-item">
                <label for="item-10">2010</label>
                <h2>2010</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            <li style="--i: 11;">
                <input type="radio" id="item-11" name="gallery-item">
                <label for="item-11">2011</label>
                <h2>2011</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 12;">
                <input type="radio" id="item-12" name="gallery-item">
                <label for="item-12">2012</label>
                <h2>2012</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 13;">
                <input type="radio" id="item-13" name="gallery-item">
                <label for="item-13">2013</label>
                <h2>2013</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 14;">
                <input type="radio" id="item-14" name="gallery-item">
                <label for="item-14">2014</label>
                <h2>2014</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 15;">
                <input type="radio" id="item-15" name="gallery-item">
                <label for="item-15">2015</label>
                <h2>2015</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 16;">
                <input type="radio" id="item-16" name="gallery-item">
                <label for="item-16">2016</label>
                <h2>2016</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 17;">
                <input type="radio" id="item-17" name="gallery-item">
                <label for="item-17">2017</label>
                <h2>2017</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 18;">
                <input type="radio" id="item-18" name="gallery-item">
                <label for="item-18">2018</label>
                <h2>2018</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 19;">
                <input type="radio" id="item-19" name="gallery-item">
                <label for="item-19">2019</label>
                <h2>2019</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 20;">
                <input type="radio" id="item-20" name="gallery-item">
                <label for="item-20">2020</label>
                <h2>2020</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 21;">
                <input type="radio" id="item-21" name="gallery-item">
                <label for="item-21">2021</label>
                <h2>2021</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 22;">
                <input type="radio" id="item-22" name="gallery-item">
                <label for="item-22">2022</label>
                <h2>2022</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 23;">
                <input type="radio" id="item-23" name="gallery-item">
                <label for="item-23">2023</label>
                <h2>2023</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 24;">
                <input type="radio" id="item-24" name="gallery-item">
                <label for="item-24">2024</label>
                <h2>2024</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
            <li style="--i: 25;">
                <input type="radio" id="item-25" name="gallery-item">
                <label for="item-25">2025</label>
                <h2>2025</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, perspiciatis dicta? In nihil quidem sunt omnis facilis quas corporis at, officia itaque!</p>
            </li>
        </ul>
  </div>

CSS

@import "https://codepen.io/cbolson/pen/rNEdgKo.css" layer(template);
@layer template, demo;

@layer demo {
  /* Hide radio buttons */
  input[type="radio"] {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
  }
  .cards-container {
    --base-rotation: 0deg;
    --full-circle: 360deg;
    --radius: 40vw;
    --duration: 200ms;

--cards-container-size: calc(var(--radius) * 2);
    --cards-container-padding: 2rem;

--border-color: transparent;

--label-offset: calc(var(--radius) * -1 - 1rem);
    --label-size: 30px;
    --label-color: #666;
    --label-color-hover: steelblue;
    --label-line-h: 0;
    --label-line-h-current: 2rem;
    --label-dot-size: 10px;

--title-top: 1.5rem;
    --title-offset-y: 30px;

--info-top: 5rem;
    --info-width: 80%;
    --info-offset-y: 30px;

box-sizing: content-box;
    position: fixed;
    inset: 0;
    margin: auto;
    width: var(--cards-container-size);
    height: var(--cards-container-size);

padding: var(--cards-container-padding);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
  @media (min-width: 800px) {
    .cards-container {
      --radius: 30vw;
      --label-size: 40px;
      --label-dot-size: 15px;
      --label-line-h-current: 4rem;
      --title-top: 4rem;
      --info-top: 8rem;
    }
  }
  @media (min-width: 1200px) {
    .cards-container {

--label-size: 50px;
      --border-color: var(--label-color);
      --info-width: min(100% - 2rem, 65%);

}
  }
  .cards {
    position: absolute;
    inset: var(--cards-container-padding);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease-in-out var(--duration);
    list-style: none;
  }

.cards li {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    transform-origin:center;
    display: grid;
    place-content: center;
    transform: rotate(calc(var(--i) * 360deg / var(--items)));
    pointer-events: none;
  }

.cards li > label {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(var(--label-offset));
    width: var(--label-size);
    height: var(--label-size);
    cursor: pointer;
    pointer-events: initial;
    text-align: center;
    color: var(--label-color);
    transition: var(--duration) ease-in-out;

}
  .cards li > label::before{
      content: '';
      position: absolute;
      top: var(--cards-container-padding);
      left: 50%;
      translate: -50% 0;
      width: var(--label-dot-size);
      height: var(--label-dot-size);
      aspect-ratio: 50%;
      border-radius: 50%;
      background-color: var(--label-color);
      transition: background-color var(--duration) ease-in-out;
  }

.cards li > label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 5px;
    width: 2px;
    height: var(--label-line-h);
    background-color: steelblue;
    transition: height 300ms ease-in-out var(--label-line-delay,0ms);
  }
  .cards li > label:hover{
    --label-color: var(--label-color-hover);
  }

.cards > li > h2,
  .cards > li > p{
    position: absolute;
    left: 50%;
    text-align: center;
    transform: translate(-50%, 0);
    transform-origin: center;
  }
  .cards > li > h2{
    top: var(--title-top);
    opacity: var(--title-opacity,0);
    translate: 0 var(--title-offset-y);
    transition: var(--duration) ease-in-out var(--title-delay,0ms);
  }
  .cards > li > p{
    top: var(--info-top);
    margin: 0 auto;
    width: var(--info-width);
    z-index: 2;
    font-size: clamp(.8rem, 2.5vw + 0.05rem, .9rem);
    text-wrap: balance;
    opacity: var(--info-opacity,0);
    translate: 0 var( --info-offset-y);
    transition: var(--duration) ease-in-out var(--info-delay,0ms);
  }

/* update custom properties for checked item */
  li:has(input:checked){
      --label-opacity: 1;
      --label-color: var(--label-color-hover);
      --label-line-h: var(--label-line-h-current);
      --label-line-delay: calc(var(--duration) * 2);

--title-opacity: 1;
      --title-offset-y: 0;
      --title-delay: calc(var(--duration) * 3);

--info-opacity: 1;
      --info-offset-y: 0;
      --info-delay: calc(var(--duration) * 4);
      /*outline: 1px dashed red;*/
  }

/* rotate container based on checked radio */
  .cards:has(input:checked) {
    transform: rotate(calc(var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))));
  }
  /*
  this would be so much simpler if we could use counter values as custom property values
  */
  .cards:has(li:nth-child(1)>input:checked) { --index: 0; }
  .cards:has(li:nth-child(2)>input:checked) { --index: 1; }
  .cards:has(li:nth-child(3)>input:checked) { --index: 2; }
  .cards:has(li:nth-child(4)>input:checked) { --index: 3; }
  .cards:has(li:nth-child(5)>input:checked) { --index: 4; }
  .cards:has(li:nth-child(6)>input:checked) { --index: 5; }
  .cards:has(li:nth-child(7)>input:checked) { --index: 6; }
  .cards:has(li:nth-child(8)>input:checked) { --index: 7; }
  .cards:has(li:nth-child(9)>input:checked) { --index: 8; }
  .cards:has(li:nth-child(10)>input:checked) { --index: 9; }
  .cards:has(li:nth-child(11)>input:checked) { --index: 10; }
  .cards:has(li:nth-child(12)>input:checked) { --index: 11; }
  .cards:has(li:nth-child(13)>input:checked) { --index: 12; }
  .cards:has(li:nth-child(14)>input:checked) { --index: 13; }
  .cards:has(li:nth-child(15)>input:checked) { --index: 14; }
  .cards:has(li:nth-child(16)>input:checked) { --index: 15; }
  .cards:has(li:nth-child(17)>input:checked) { --index: 16; }
  .cards:has(li:nth-child(18)>input:checked) { --index: 17; }
  .cards:has(li:nth-child(19)>input:checked) { --index: 18; }
  .cards:has(li:nth-child(20)>input:checked) { --index: 19; }
  .cards:has(li:nth-child(21)>input:checked) { --index: 20; }
  .cards:has(li:nth-child(22)>input:checked) { --index: 21; }
  .cards:has(li:nth-child(23)>input:checked) { --index: 22; }
  .cards:has(li:nth-child(24)>input:checked) { --index: 23; }
  .cards:has(li:nth-child(25)>input:checked) { --index: 24; }
  .cards:has(li:nth-child(26)>input:checked) { --index: 25; }
}

Chronologie de la roue - CSS pur

Recommandé

Générateur de mot de passe

Carte membres de l'équipe CSS

Le safari de microinteraction

HTML

CSS

JS

Recommandé

Générateur de mot de passe

Carte membres de l'équipe CSS

Le safari de microinteraction

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS