Despite applying the style to the image, my rotateY function is not functioning properly

Question

Despite applying the style to the image, my rotateY function is not functioning properly

I have created a unique slider feature where images rotate either 180deg or 360deg before sliding. However, I've encountered an issue that I can't seem to figure out. The slider works perfectly until the image reaches its initial position. At this point, even though the rotateY style is being added to the images (confirmed in the console), they still do not rotate as expected. Can anyone provide insight into this strange behavior?

const container = document.querySelectorAll('.image-container')
const nextBtn = document.querySelector('.next')
let counter = 0


nextBtn.addEventListener('click', moveSlide)

function moveSlide() {
  counter++
  n =(counter%2) * 180 +180
    if(counter===6){
      console.log(counter)
      image = document.querySelector(`.image-container:nth-child( ${counter}) img `)
      console.log(image)
      image.style.transform = `rotateY(${n}deg)`
        container.forEach((image, index) => {
            let width = image.getBoundingClientRect().width
            console.log(width)
            image.style.transform = `translate(0%) rotateY(0deg)`
            counter=0
        return
        })
    }else{
      console.log({counter})
      console.log({n})
        image = document.querySelector(`.image-container:nth-child( ${counter}) img `)
        console.log(image)
        image.style.transform = `rotateY(${n}deg)`
        container.forEach((image, index) => {
          let width = image.getBoundingClientRect().width
          setTimeout(() => {
            image.style.transform = `translate(-${(counter)*width}px`
          }, 450)
      
        })
    }


}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  
  .slider-container {
    height: 50vh;
    width: 300px;
    display: flex;
    margin: auto;
    flex-direction: row;
    /* overflow: hidden; */
    overflow: auto;
  }
  
  .image-container,
  .image-container img {
    display: block;
    width: 300px;
    transition: transform 450ms ease;
  }
  
  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 5px;
  }
  
  .btn-container .btn {
    width: 15vw;
    padding: 5px;
  }

<div class="wrapper">
    <div class="slider-container">
        <div class="image-container">
            <img src="https://picsum.photos/id/237/300/200" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/seed/picsum/300/200" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/300/200?grayscale" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/300/200/?blur" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/id/870/300/200?grayscale&blur=2" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/id/1/300/200" alt="">
        </div>
    </div>
    <div class="btn-container">
        <button class="btn prev">Previous</button>
        <button class="btn next">Next</button>
    </div>
</div>

javascript slider rotatetransform

Answer 1

Answer №1

After the second round of adjustments to the slides, the styling is now fully integrated into each one.

If you apply a 180deg rotation to an object that already has the same degree of rotation, nothing will change visibly.

To address this issue, one potential solution could involve:

Reverting the rotation back to 0deg once it's completed;
Dynamically managing the transition, considering timing such as 0ms when not in motion, and 450ms during rotation so that the reset back to 0deg goes unnoticed by the observer.

Answer 2

After the second round of adjustments to the slides, the styling is now fully integrated into each one.

If you apply a 180deg rotation to an object that already has the same degree of rotation, nothing will change visibly.

To address this issue, one potential solution could involve:

Reverting the rotation back to 0deg once it's completed;
Dynamically managing the transition, considering timing such as 0ms when not in motion, and 450ms during rotation so that the reset back to 0deg goes unnoticed by the observer.

Answer 3

Answer №2

In order to fix the issue with the image rotation not being visible, you should remove the existing style:rotateY(180deg) and set it back to style:rotateY(0deg) right after the flip. It is recommended to use a setTimeout for better control over the rotation effect. Here is an updated version of the code (note that I changed the name of the image variable to imageNode in the forEach loop for clarity):

const container = document.querySelectorAll('.image-container')
const nextBtn = document.querySelector('.next')
let counter = 0

nextBtn.addEventListener('click', moveSlide)

function moveSlide() {
  counter += 1
  let n = 180
  
  if(counter === 6){
    console.log(counter)
    let image = document.querySelector(`.image-container:nth-child(${counter}) img`)
    console.log(image)
    image.style.transform = `rotateY(${n}deg)`
    
    container.forEach((imageNode, index) => {
      let width = imageNode.getBoundingClientRect().width
      console.log(width)
      imageNode.style.transform = `translate(0%)`
      counter = 0
      setTimeout(() => {image.style.transform = `rotateY(0deg)`}, 300)
      return
    })
  }else{
    console.log({counter})
    console.log({n})
    
    let image = document.querySelector(`.image-container:nth-child(${counter}) img`)
    console.log(image)
    image.style.transform = `rotateY(${n}deg)`
    
    setTimeout(() => {image.style.transform = `rotateY(0deg)`}, 300)
    
    container.forEach((imageNode, index) => {
      let width = imageNode.getBoundingClientRect().width
      
      setTimeout(() => {
        imageNode.style.transform = `translate(-${counter * width}px)`
      }, 450)
    })
  }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .slider-container {
    height: 50vh;
    width: 300px;
    display: flex;
    margin: auto;
    flex-direction: row;
    /* overflow: hidden; */
    overflow: auto;
  }

  .image-container,
  .image-container img {
    display: block;
    width: 300px;
    transition: transform 450ms ease;
  }

  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 5px;
  }

  .btn-container .btn {
    width: 15vw;
    padding: 5px;
  }

<div class="wrapper">
    <div class="slider-container">
        <div class="image-container">
            <img src="https://picsum.photos/id/237/300/200" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/seed/picsum/300/200" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/300/200?grayscale" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/300/200/?blur" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/id/870/300/200?grayscale&blur=2" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/id/1/300/200" alt="">
        </div>
    </div>
    <div class="btn-container">
        <button class="btn prev">Previous</button>
        <button class="btn next">Next</button>
    </div>
</div>

Answer 4

In order to fix the issue with the image rotation not being visible, you should remove the existing style:rotateY(180deg) and set it back to style:rotateY(0deg) right after the flip. It is recommended to use a setTimeout for better control over the rotation effect. Here is an updated version of the code (note that I changed the name of the image variable to imageNode in the forEach loop for clarity):

const container = document.querySelectorAll('.image-container')
const nextBtn = document.querySelector('.next')
let counter = 0

nextBtn.addEventListener('click', moveSlide)

function moveSlide() {
  counter += 1
  let n = 180
  
  if(counter === 6){
    console.log(counter)
    let image = document.querySelector(`.image-container:nth-child(${counter}) img`)
    console.log(image)
    image.style.transform = `rotateY(${n}deg)`
    
    container.forEach((imageNode, index) => {
      let width = imageNode.getBoundingClientRect().width
      console.log(width)
      imageNode.style.transform = `translate(0%)`
      counter = 0
      setTimeout(() => {image.style.transform = `rotateY(0deg)`}, 300)
      return
    })
  }else{
    console.log({counter})
    console.log({n})
    
    let image = document.querySelector(`.image-container:nth-child(${counter}) img`)
    console.log(image)
    image.style.transform = `rotateY(${n}deg)`
    
    setTimeout(() => {image.style.transform = `rotateY(0deg)`}, 300)
    
    container.forEach((imageNode, index) => {
      let width = imageNode.getBoundingClientRect().width
      
      setTimeout(() => {
        imageNode.style.transform = `translate(-${counter * width}px)`
      }, 450)
    })
  }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    height: 100vh;
    overflow: hidden;
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .slider-container {
    height: 50vh;
    width: 300px;
    display: flex;
    margin: auto;
    flex-direction: row;
    /* overflow: hidden; */
    overflow: auto;
  }

  .image-container,
  .image-container img {
    display: block;
    width: 300px;
    transition: transform 450ms ease;
  }

  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 5px;
  }

  .btn-container .btn {
    width: 15vw;
    padding: 5px;
  }

<div class="wrapper">
    <div class="slider-container">
        <div class="image-container">
            <img src="https://picsum.photos/id/237/300/200" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/seed/picsum/300/200" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/300/200?grayscale" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/300/200/?blur" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/id/870/300/200?grayscale&blur=2" alt="">
        </div>
        <div class="image-container">
            <img src="https://picsum.photos/id/1/300/200" alt="">
        </div>
    </div>
    <div class="btn-container">
        <button class="btn prev">Previous</button>
        <button class="btn next">Next</button>
    </div>
</div>

Despite applying the style to the image, my rotateY function is not functioning properly

Answer №1

Answer №2

Similar questions

Increase the identification of HTML element with jQuery

How can we effectively manage error responses and retry a failed call in NodeJS without getting tangled in callback hell?

Error encountered with Ajax client-side framework while executing HTML code

Encountering an issue: Unable to initiate a local server when running `npm start`

Is there a way to postpone the collapse functionality in Bootstrap?

AngularJS directive: Cookie value not being applied to data binding operation

Caution: Refs cannot be assigned to function components

Is indexed coloring available for vertices in three.js?

The Date.UTC function is not providing the correct output

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Unable to identify the pdf file using multer in node.js

Can you pass a specific function as a parameter in express.post()?

Displaying the server's feedback upon successfully uploading a file onto the server

Is there a way for me to collaborate on a footer control with a different website?

Tips on enlarging the header size in ion-action-sheet within the VueJS framework of Ionic

View the picture directly on this page

In TypeScript, the catch block does not get triggered

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

What is the method to prevent the label from closing in the MUI 5 datepicker?

Discovering common elements in various arrays of objects