Intersectional Design Considerations

index.html

<div class="scene">
  <div class="carousel">
    <div class="carousel__cell">
      <div>
      <h1 class="uppercase">Intersectional Design Considerations</h1>
        <p>What is intersectionality? Why does this matter to technology design?</p>
        <a href="#" class="random-button"><span>Explore</span></a>
      </div>
    </div>
    <div class="carousel__cell">
      <div>
        <h1>Low-income + Non-binary</h1>
        <p>Intro paragraph</p>
        <h2>Case study</h2>
        <p>Paragraph</p>
        <h2>Other layers</h2>
        <ul><li>List</li></ul>
        <h2>Considerations</h2>
        <ul><li>List</li></ul>
        <h2>Resources</h2>
        <ul><li>List</li></ul>
      </div>
    </div>
    <div class="carousel__cell">
      <div>
        <h1>Black + </h1>
        <p>Intro paragraph</p>
        <h2>Case study</h2>
        <p>Paragraph</p>
        <h2>Other layers</h2>
        <ul><li>List</li></ul>
        <h2>Considerations</h2>
        <ul><li>List</li></ul>
        <h2>Resources</h2>
        <ul><li>List</li></ul>
      </div>
    </div>
    <div class="carousel__cell">4</div>
    <div class="carousel__cell">5</div>
    <div class="carousel__cell">6</div>
    <div class="carousel__cell">7</div>
    <div class="carousel__cell">8</div>
    <div class="carousel__cell">9</div>
    <div class="carousel__cell">10</div>
    <div class="carousel__cell">11</div>
    <div class="carousel__cell">12</div>
    <div class="carousel__cell">13</div>
    <div class="carousel__cell">14</div>
    <div class="carousel__cell">15</div>
  </div>
</div>

<div class="carousel-options">
  <p style="display:none;">
    <label>
      Cells
      <input class="cells-range" type="range" min="3" max="15" value="9" />
    </label>
  </p>
  <p>
    <button class="previous-button"></button>
    <button class="next-button"></button>
  </p>
  <p style="display:none;">
    Orientation:
    <label>
      <input type="radio" name="orientation" value="horizontal" checked />
      horizontal
    </label>
    <label>
      <input type="radio" name="orientation" value="vertical" />
      vertical
    </label>
  </p>
</div>

intersectional-design-considerations.markdown

Intersectional Design Considerations

From Intro to CSS 3D Transforms

A Pen by Klare on CodePen.

License.

script.js

var carousel = document.querySelector('.carousel');
var cells = carousel.querySelectorAll('.carousel__cell');
var cellCount; // cellCount set from cells-range input value
var selectedIndex = 0;
var cellWidth = carousel.offsetWidth;
var cellHeight = carousel.offsetHeight;
var isHorizontal = true;
var rotateFn = isHorizontal ? 'rotateY' : 'rotateX';
var radius, theta;
// console.log( cellWidth, cellHeight );

function rotateCarousel() {
  var angle = theta * selectedIndex * -1;
  carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 
    rotateFn + '(' + angle + 'deg)';
}

var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener( 'click', function() {
  selectedIndex--;
  rotateCarousel();
});

var nextButton = document.querySelector('.next-button');
nextButton.addEventListener( 'click', function() {
  selectedIndex++;
  rotateCarousel();
});

var cellsRange = document.querySelector('.cells-range');
cellsRange.addEventListener( 'change', changeCarousel );
cellsRange.addEventListener( 'input', changeCarousel );



function changeCarousel() {
  cellCount = cellsRange.value;
  theta = 360 / cellCount;
  var cellSize = isHorizontal ? cellWidth : cellHeight;
  radius = Math.round( ( cellSize / 2.2) / Math.tan( Math.PI / cellCount ) );
  for ( var i=0; i < cells.length; i++ ) {
    var cell = cells[i];
    if ( i < cellCount ) {
      // visible cell
      cell.style.opacity = 1;
      var cellAngle = theta * i;
      cell.style.transform = rotateFn + '(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
    } else {
      // hidden cell
      cell.style.opacity = 0;
      cell.style.transform = 'none';
    }
  }

  rotateCarousel();
}

var orientationRadios = document.querySelectorAll('input[name="orientation"]');
( function() {
  for ( var i=0; i < orientationRadios.length; i++ ) {
    var radio = orientationRadios[i];
    radio.addEventListener( 'change', onOrientationChange );
  }
})();

function onOrientationChange() {
  var checkedRadio = document.querySelector('input[name="orientation"]:checked');
  isHorizontal = checkedRadio.value == 'horizontal';
  rotateFn = isHorizontal ? 'rotateY' : 'rotateX';
  changeCarousel();
}

// set initials
onOrientationChange();

style.css

* { box-sizing: border-box; }

body {
  text-align: left;
  overflow-x: hidden;
  background-color: #F2F2F9;
  font-family: 'Barlow', sans-serif;
}

.scene {
  margin: 20px 0;
  position: relative;
  width: 800px;
  min-height: 700px;
  margin: 20px auto;
  perspective: 1000px;
}


.carousel {
  width: 100%;
  min-height: 100%;
  position: absolute;
/*   transform: translateZ(-200px); */
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel__cell {
  position: absolute;
  width: 800px;
  min-height: 700px;
  left: 10px;
  top: 10px;
  padding: 2rem 4rem;
  border-radius: 4px;
  background-color: rgba(255,255,255, .9);
  box-shadow: 0 5px 10px rgba(250, 249, 251, .75);
/*   border: 2px solid black; */
  font-size: 80px;
  font-weight: bold;
  color: #504E60;
  text-align: left;
  transition: transform 1s, opacity 1s;
  display: flex;
  align-items: center;
  
}
.carousel__cell > div {
  width: 100%;
}
.carousel__cell h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.carousel__cell h2 {
  font-size: 1rem;
  margin-bottom: 0;
  text-transform: uppercase;
  margin-top: 1.5rem;
  letter-spacing: .05rem;
}
h2 + p {
  margin-top: .5rem;
}
ul {
  margin: .5rem 0;
  padding-left: 1.5rem;
}
li {
  font-weight: 400;
  font-size: 1rem;
  margin: 0;
  line-height: 1;
}

.uppercase {
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
}

.carousel__cell p {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

/* .carousel__cell:nth-child(9n+1) { background: hsla(  0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }
 */
.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }



.carousel-options {
  text-align: center;
/*   position: relative; */
  z-index: 2;
  background: hsla(0, 0%, 100%, 0.8);
}

.previous-button, .next-button {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  margin-top: -1rem;
}

.previous-button {
  left: 2rem;
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 25px solid #FFA500;
  border-left: 0;
  background: transparent;
  content: "";
}

.next-button {
  right: 2rem;
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #FF3D00;
  border-right: 0;
  background: transparent;
  content: "";
}

.random-button {
  background-color: #ECFF80;
  border: none;
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: .05em;
  padding: 1rem 2.5rem;
  margin-left: .5rem;
  transform: skewX(35deg);
  z-index: 5000;
  display: inline-block;
  position: relative;
}
.random-button span {
  display: inline-block;
  transform: skewX(-35deg);
  color: #48425C;
  font-weight: 500;
}