When using translational rotation

Question

When using translational rotation

I use transform: rotate();to rotate content inside and outside the field of view, however, each text of the text is in a different position when it appears in the field of view. Therefore, when you click the next button on my demo, if you look at the border, the content is in different positions.

When the next button is pressed, the wheel rotates evenly 90 degrees, so I expect the contents to be in the same position at every turn. Can someone explain / decide why this is not happening?

I created a wheel for my content, and I created a wheel to hide options that are not currently visible;

// Page load transform start, setters
var degree = 0;
var itemStart = $('.wheel').find('.item-one').addClass('item-active');
var itemNext = $('.wheel').find('.item-four').addClass('item-prev');

// On click
$('.next').click(function() {
  var wheel = $('.wheel');

  // Increment rotation
  degree += 90;
  wheel.css({
    WebkitTransform: 'rotate(' + degree + 'deg)'
  });

  // Update setter
  itemStart = $('.wheel').find('.item-active');
  itemNext = $('.wheel').find('.item-prev');

  // Add Animation
  $(itemStart).addClass('fadeOut');
  $(itemNext).addClass('fadeIn');

  //If were at the end
  var getStartPrev = $(itemStart).prev();
  var getNextPrev = $(itemNext).prev();

  if (getStartPrev.length == 0) {
    $(itemStart).removeClass('item-active');
    $(itemNext).prev().addClass('item-prev');
    $('.item-four').addClass('item-active').removeClass('item-prev');
  } else {
    $(itemStart).removeClass('item-active');
    $(itemNext).removeClass('item-prev').addClass('item-active');
    $(itemNext).prev().addClass('item-prev');
  }

  if (getNextPrev.length == 0) {
    $('.item-four').addClass('item-prev');
  }

  // Remove Animation
  setTimeout(function() {
    $('.wheel').find('.item').removeClass('fadeIn fadeOut');
  }, 400);
});

.wheel-wrp {
  position: relative;
  height: 700px;
  width: 700px;
}

.wheel {
  height: 700px;
  width: 700px;
  transition: 0.75s;
  border-radius: 50%;
  position: relative;
  background: #fff;
  left: -350px;
}

.item {
  width: 250px;
  position: absolute;
  opacity: 0;
}

.item-active {
  opacity: 1;
}

.item-one {
  bottom: 300px;
  left: 450px;
}

.item-two {
  bottom: 20px;
  left: 230px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

.item-three {
  bottom: 320px;
  left: 0px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.item-four {
  top: 20px;
  left: 230px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
}

.current-item {
  bottom: 300px;
  left: 450px;
}

.next-item {
  top: 20px;
  left: 230px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(-90deg);
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div class="wheel-wrp">
    <div class="wheel">
      <div class="item item-one">
        <h4>Project 1 - beautifully crafted digital brand</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-two">
        <h4>Project 2 - redefining technological boundaries</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-three">
        <h4>Project 3 - Beauty in Design</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-four">
        <h4>Project 4 - simply stunning </h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
    </div>
  </div>
</div>
<div class="next">Next</div>

Run code

Demo example - https://codepen.io/SamXronn/pen/opqWbq

+6

javascript jquery html css css3

SamXronn 18 . '18 11:59

4

. div, , px. ,

, top:50; transform:-50%, div.

. , , , , - , (%, , , )... ,

// Page load transform start, setters
var degree = 0;
var itemStart = $('.wheel').find('.item-one').addClass('item-active');
var itemNext = $('.wheel').find('.item-four').addClass('item-prev');

// On click
$('.next').click( function() {
  var wheel = $('.wheel');
  
  // Increment rotation
  degree += 90;
  wheel.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
    
  // Update setter
  itemStart = $('.wheel').find('.item-active');
  itemNext = $('.wheel').find('.item-prev');

  // Add Animation
  $(itemStart).addClass('fadeOut');
  $(itemNext).addClass('fadeIn');
  
  //If were at the end
  var getStartPrev = $(itemStart).prev();
  var getNextPrev = $(itemNext).prev();
  
  if( getStartPrev.length == 0 ) {
    $(itemStart).removeClass('item-active');
    $(itemNext).prev().addClass('item-prev');
    $('.item-four').addClass('item-active').removeClass('item-prev');
  } else {
    $(itemStart).removeClass('item-active');
    $(itemNext).removeClass('item-prev').addClass('item-active');
    $(itemNext).prev().addClass('item-prev');   
  }
  
  if( getNextPrev.length == 0 ) {
    $('.item-four').addClass('item-prev');
  }
  
   // Remove Animation
   setTimeout(function(){ 
    $('.wheel').find('.item').removeClass('fadeIn fadeOut');
   }, 400);
});

body{
 background-color:  #2c3e50; 
}

.next{
  background: #2980b9;
  padding: 15px 35px;
  color: #fff;
  float: left;
  position: relative;
  z-index: 9999;
  cursor: pointer;
}

.wheel-wrp{
  position: relative;
  height: 700px;
  width: 700px;
}

.wheel{
  height: 700px;
  width: 700px;
  transition: 0.75s;
  border-radius: 50%;
  position: relative;
  background: #fff;
  left: -350px;
}
.item{
  width: 250px;
  position: absolute;
  opacity: 0;
  border: 1px solid red;
}
.item-active{
  opacity: 1;
}
.item-one {
    top: 50%;
    transform: translateY(-50%);
    left: 75%;
}

.item-two {
    right: 50%;
    top: 83%;
    transform: translateX(50%) rotate(90deg);
}

.item-three {
    top: 50%;
    right: 75%;
    transform: rotate(180deg) translateY(50%);
}

.item-four {
    left: 50%;
    bottom: 84%;
    transform: translateX(-50%) rotate(270deg);
}

.current-item{
  bottom: 300px;
  left: 450px;
}

.next-item{
  top: 20px;
  left: 230px;
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(-90deg);
  opacity: 0;
}

h4{
  margin:0px 0px;
}


.fadeOut{
  animation: menuFadeOut 350ms;
  webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;  
}

.fadeIn{
  animation: menuFadeIn 1500ms;
  webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes menuFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes menuFadeIn {
  0% {
    opacity: 0;
  } 
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="page">
  <div class="wheel-wrp">
    <div class="wheel">
      <div class="item item-one">
        <h4>Project 1 - beautifully crafted digital brand</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-two">
        <h4>Project 2 - redefining technological boundaries</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div> 
      <div class="item item-three">
        <h4>Project 3 - Beauty in Design</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div> 
      <div class="item item-four">
        <h4>Project 4 - simply stunning </h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
    </div>
  </div>
</div>
<div class="next">Next</div>

, , , , :

.item-one {
    top: 50%;
    transform: translateY(-50%);
    left: 75%;
}

.item-two {
    right: 50%;
    top: 83%;
    transform: translateX(50%) rotate(90deg);
}

.item-three {
    top: 50%;
    right: 75%;
    transform: rotate(180deg) translateY(50%);
}

.item-four {
    left: 50%;
    bottom: 84%;
    transform: translateX(-50%) rotate(270deg);
}

, . - , + , ;)

+1

Facundo Corradini 18 . '18 12:58

:) item-one two.. css nth-child, CSS, transform-origin, , , , 270deg 0deg. , .

$(".next").on("click", function () {
        var wheel = $(".wheel");
        if (wheel.hasClass("rotate-1")) {
            wheel.removeClass("rotate-1").addClass("rotate-2");
        }
        else if (wheel.hasClass("rotate-2")) {
            wheel.removeClass("rotate-2").addClass("rotate-3");
        }
        else if (wheel.hasClass("rotate-3")) {
            wheel.removeClass("rotate-3").addClass("rotate-4");
        }
        else if (wheel.hasClass("rotate-4")) {
            wheel.removeClass("rotate-4").addClass("rotate-5").delay(1000).queue(function (next) {
                $(this).addClass("rotate-1");
                $(this).removeClass("rotate-5");
                next();
            });
        }

    });

.wheel {
            border-radius: 50%;
            background: rebeccapurple;
            width: 700px;
            height: 700px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 1s ease;
            margin-left : -350px;
        }

        .item {
            background:transparent;
            color: white;
            width: 250px;
            margin-right: 10px;
            margin-left: calc(50% - 135px);
            position: absolute;
            transform-origin: calc(-50% + 35px) 50%;
            transition: all 1s ease;
        }

        .wheel.rotate-1 {
            transform: rotateZ(0deg);
            transition: all 0s ease;
        }

        .wheel.rotate-2 {
            transform: rotateZ(90deg);
        }

        .wheel.rotate-3 {
            transform: rotateZ(180deg);
        }

        .wheel.rotate-4 {
            transform: rotateZ(270deg);
        }

        .wheel.rotate-5 {
            transform: rotateZ(360deg);
        }

        .item:nth-child(1) {
            transform: rotateZ(0deg);
        }

        .item:nth-child(2) {
            transform: rotateZ(-90deg);
        }

        .item:nth-child(3) {
            transform: rotateZ(-180deg);
        }

        .item:nth-child(4) {
            transform: rotateZ(-270deg);
        }

        .wheel.rotate-1 .item {
            opacity: 0;
        }
        .wheel.rotate-1 .item:nth-child(1) {
            opacity: 1;
        }
        .wheel.rotate-2 .item {
            opacity: 0;
        }
        .wheel.rotate-2 .item:nth-child(2) {
            opacity: 1;
        }
        .wheel.rotate-3 .item {
            opacity: 0;
        }
        .wheel.rotate-3 .item:nth-child(3) {
            opacity: 1;
        }
        .wheel.rotate-4 .item {
            opacity: 0;
        }
        .wheel.rotate-4 .item:nth-child(4) {
            opacity: 1;
        }
        .wheel.rotate-5 .item {
            opacity: 0;
        }
        .wheel.rotate-5 .item:nth-child(1) {
            opacity: 1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
        <div class="wheel-wrp">
            <div class="wheel rotate-1">
                <div class="item">
                    <h4>Project 1 - beautifully crafted digital brand</h4>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                        laborum..
                    </p>
                </div>
                <div class="item">
                    <h4>Project 2 - redefining technological boundaries</h4>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                        laborum..
                    </p>
                </div>
                <div class="item">
                    <h4>Project 3 - Beauty in Design</h4>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                        laborum..
                    </p>
                </div>
                <div class="item">
                    <h4>Project 4 - simply stunning </h4>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                        laborum..
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="next">Next</div>

+1

Taha Paksu 18 . '18 13:00

, , .

I changed the mapping of properties .itemto flexibility. And did some manipulations with transform-originand positioning the elements

body{
 background-color:  #2c3e50; 
}

.next{
  background: #2980b9;
  padding: 15px 35px;
  color: #fff;
  float: left;
  position: relative;
  z-index: 9999;
  cursor: pointer;
}

.wheel-wrp{
  position: relative;
  height: 700px;
  width: 700px;
}

.wheel{
  height: 700px;
  width: 700px;
  transition: 0.75s;
  border-radius: 50%;
  position: relative;
  background: #fff;
  left: -350px;
  transform-origin: center;
}
.item{
	width: 250px;
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    position: absolute;
    opacity: 0;
    border: 1px solid red;
    transform-origin: center;
}
.item-active{
  opacity: 1;
}
.item-one{
  right: 0;
}

.item-two{
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    bottom: 250px;
    transform-origin: bottom left;
}

.item-three{
  left: 0px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.item-four{
      bottom: -250px;
    transform-origin: top left;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg); 
}

.current-item{
  bottom: 300px;
  left: 450px;
}

.next-item{
  top: 20px;
  left: 230px;
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(-90deg);
  opacity: 0;
}

h4{
  margin:0px 0px;
}


.fadeOut{
  animation: menuFadeOut 350ms;
  webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;  
}

.fadeIn{
  animation: menuFadeIn 1500ms;
  webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes menuFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes menuFadeIn {
  0% {
    opacity: 0;
  } 
  100% {
    opacity: 1;
  }
}

Run code

0

Andrey Novikov Jan 18 '18 at 12:35

source share

Jeremy Thille · Accepted Answer · 2018-01-18T12:52:21+0000

.

, ( , )
transform translateY translateX,
jQuery . . CSS3 "" .

let currentItem = 0
const $wheel = $('.wheel'),
      $items = $wheel.find(".item")

$('.next').click(() => rotate(1));
$('.prev').click(() => rotate(-1));

const rotate = direction => {
    currentItem -= direction
    $wheel.css("transform",`rotate(${-currentItem*90}deg)`)
    $items.removeClass("active")
          .eq(currentItem%$items.length)
          .addClass("active")

}

body {
  background-color: #2c3e50;
}
button {
  background: #2980b9;
  padding: 15px 35px;
  color: #fff;
  float: left;
  position: relative;
  z-index: 9999;
  cursor: pointer;
}
.wheel {
  height: 700px;
  width: 700px;
  transition: transform 0.75s;
  border-radius: 50%;
  position: relative;
  background: #fff;
}
.item {
  width: 250px;
  position: absolute;
  opacity: 0.2;
  transition: opacity 0.75s;
  border: 1px solid #f00;
  transform-origin: top left;
}
.item:nth-child(1) {
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(-100%);
}
.item:nth-child(2) {
  top: 100%;
  left: 50%;
  transform: rotate(90deg) translateY(-50%) translateX(-100%);
}
.item:nth-child(3) {
  left: 0;
  top: 50%;
  transform: rotate(180deg) translateY(-50%) translateX(-100%);
}
.item:nth-child(4) {
  top: 0;
  left: 50%;
  transform: rotate(270deg) translateY(-50%) translateX(-100%);
}
.item.active {
  opacity: 1;
}
h4 {
  margin: 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="page">
    <div class="wheel">
      <div class="item active">
        <h4>Project 1 - beautifully crafted digital brand</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item">
        <h4>Project 2 - redefining technological boundaries</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div> 
      <div class="item">
        <h4>Project 3 - Beauty in Design</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div> 
      <div class="item">
        <h4>Project 4 - simply stunning </h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
    </div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>

When using translational rotation

More articles: