我正在使用
当单击下一个按钮时,轮子平均旋转90度,因此我希望每次旋转时内容都处于相同的位置。但有人能解释/解决为什么这种情况不会发生吗?
我为我的内容创建了一个轮子,并将轮子样式设置为隐藏当前不可见的选项。
transform: rotate();
来旋转内容,使其进入或退出视图。然而,每个文本主体在进入视图时都处于不同的位置。因此,当您在我的演示中单击下一个按钮并查看边框时,内容会处于不同的位置。当单击下一个按钮时,轮子平均旋转90度,因此我希望每次旋转时内容都处于相同的位置。但有人能解释/解决为什么这种情况不会发生吗?
我为我的内容创建了一个轮子,并将轮子样式设置为隐藏当前不可见的选项。
// 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>