Question 42543 in Html Question posted in
Some basic documentation can be found here.

Carousel css – rotating on the center and own a – Html

Carousel is rotating somewhere in the left side of box. How to make to rotate in the center of div around own axis?

https://code pen.io/whiskaso/pen/zYmKBMQ

Was trying with all values as width, margin but couldn’t find place where it should be setted.

Tags:

2

Answers


  1. 0 
    <style>.partners__logos {
  margin: 0;
  background: lightgray;
  text-align: center;
  font-family: sans-serif;
  color: #fefefe;
  height: 300px;
}

.container {
  position: relative;
  margin: auto;
  perspective: 1000px;
}

.carousel {
  position: absolute;
  height: 10%;
  left: 50%;
  transform-style: preserve-3d;
  transform-origin: center;
  animation: rotate360 16s infinite forwards linear;
}

.carousel__face {
  position: absolute;
  width: 150px;
  height: 87px;
  
  top: 20px;
  display: flex;
  background-color: black;
}

.carousel__face:nth-child(1) {
  transform: rotateY(0deg) translateZ(220px);
}
.carousel__face:nth-child(2) {
  transform: rotateY(40deg) translateZ(220px);
}
.carousel__face:nth-child(3) {
  transform: rotateY(80deg) translateZ(220px);
}
.carousel__face:nth-child(4) {
  transform: rotateY(120deg) translateZ(220px);
}
.carousel__face:nth-child(5) {
  transform: rotateY(160deg) translateZ(220px);
}
.carousel__face:nth-child(6) {
  transform: rotateY(200deg) translateZ(220px);
}
.carousel__face:nth-child(7) {
  transform: rotateY(240deg) translateZ(220px);
}
.carousel__face:nth-child(8) {
  transform: rotateY(280deg) translateZ(220px);
}
.carousel__face:nth-child(9) {
  transform: rotateY(320deg) translateZ(220px);
}

@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}
}</style>

    I’ve added left: 50%; in .carousel, and the carousel start rotating in the center, I wish that’s what you want.

    Login or Signup to reply.
  2. 0

    Try adding a fixed width to your container class:

    .container {
  position: relative;
  margin: auto;
  perspective: 1000px;
  width: 200px;
}

    and change your height to width in the carousel class:

    .carousel {
  position: absolute;
  width: 75%;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center;
  transform-style: preserve-3d;
  animation: rotate360 1s infinite forwards linear;
}

    It should now rotate in its own axis. Hope this helps 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search