This demo deals with CSS 3D effects, as long as the following properties are involved

1. Create two adjacent and vertical faces (two adjacent faces of a cuboid)

<div class="container" >
    <div class="content" id=content1>content1</div>
    <div class="content" id=content2>content2</div>
</div>style .container{ width: 300px; height: 500px; margin: 30px auto; border: 1px solid black; overflow: hidden; } .content{ width: 300px; height: 500px; position: absolute; } #content1{background-color: yellow; } #content2{ background-color: orange; }Copy the code

The effect is as shown in the picture below. Since position is set to Absolute, the two faces are in the same position and are in an overlapping state. You need to shift content2 350px to the right and rotate 90 degrees counterclockwise.

Set the Perspective distance on the container element

.container{
  width: 300px;
  height: 500px;
  margin: 30px auto;
  border: 1px solid black;
  overflow: hidden;
  perspective: 500px;
  backface-visibility: hidden;
}
Copy the code

Set the Content2 to shift 350px along the X axis and 90 degrees counterclockwise along the Y axis.

#content1{ transition: all 2s; background-color: yellow; transform-origin: 100% 100% 0; } #content2{transition: all 2s; background-color: orange; transform-origin: 0% 100% 0; /* Change the rotation point to the top left corner */ transform: translateX(300px) rotateY(70deg) /* Set content2 position */}Copy the code

2. Simulate the intermediate state during switching

To see it more clearly, let’s simulate the intermediate state of the switch

In the Container, set the click event to rotate the two faces when clicked

function onclick(){
  content1.style.transform='translateX(-200px) rotateY(-60deg)';
  content2.style.transform='translateX(100px) rotateY(20deg)';
}

<div class="container" onclick=onclick()>
Copy the code

As you can see from the above code, the following actions are performed when clicked

1. Content1 has been shifted 200px to the left and rotated 60 degrees clockwise to the right,
2. Content2 has been shifted 200px to the left and rotated 20 degrees clockwise to the left

You might wonder, wasn’t content2 just at -300px? TranslateX (-100px)?

Each transformation is for the original position of the element, which is in the document.

3. Listen for touch events and slide to switch between left and right

let startX, endX;
document,addEventListener('touchstart',touchStart);
document,addEventListener('touchmove',touchMove);
document,addEventListener('touchend',touchEnd);

// Start the touch
function touchStart(e){
  let touchInfo = e.touches[0];
  startX = touchInfo.clientX;
  console.log(touchInfo);
}

function touchMove(){}// End of touch
function touchEnd(e){
  let touchInfo = e.changedTouches[0];
  endX = touchInfo.clientX;
  const content1 = document.getElementById('content1');
  const content2 = document.getElementById('content2');
  console.log(endX-startX)
  if(endX-startX <=1) {// Slide from right to left to display content2
    content1.style.transform='translateX(-300px) rotateY(-70deg)';
    content2.style.transform='translateX(0px) rotateY(0deg)';
  }else{// Slide left to right to display content1
    content1.style.transform='translateX(0px) rotateY(0deg)';
    content2.style.transform='translateX(300px) rotateY(70deg)'; }}Copy the code

4. Follow slide rotation

The above is a simple sliding toggle effect that does not rotate with the touch event. We’ll add the touchMove event to do that

function touchMove(e){
  const content1 = document.getElementById('content1');
  const content2 = document.getElementById('content2');

  let touchInfo = e.touches[0];
  let clientX = touchInfo.clientX; // The x coordinate when the finger slides
  let moveLength = clientX - startX; // Move the distance

  let deg = Math.ceil((moveLength / 300) * 70);
  let movex = Math.ceil(moveLength);

  if(moveLength < 0) {// Slide from right to left, content2:-70~0; - 300 ~ 0; content1:0~-300; 0 ~ 70
    content1.style.transform=`translateX(${movex}px) rotateY(${deg}deg)`;
    content2.style.transform=`translateX(The ${300+movex}px) rotateY(The ${70+deg}deg)`;
  }else{ // content1:-70~0; - 300 ~ 0; content2:0~-300; 0 ~ 70
    content1.style.transform=`translateX(${movex-300}px) rotateY(${deg-70}deg)`;
    content2.style.transform=`translateX(${movex}px) rotateY(${deg}deg)`; }}Copy the code