CSS动画的缩放问题
我已经为旋转木马创建了一个原型，它的功能应该类似于流行的封面流交互，但是它将与div中的html一起用于描述流程中的步骤，而不是照片幻灯片。我用的是格林斯托克吐温马克斯图书馆 除了缩放问题之外，一切都很好。当每一步走到最前面时，它应该是最大的，但它不能正常工作。显然，我在某个地方应用了错误的东西 这是一把小提琴： 此外，还有一种更简单的方法可以将其模板化，以便将来添加更多步骤。目前我已经为卡片分配了CSS位置，但可能这不是必需的 欢迎提出建议CSS动画的缩放问题,css,3d,gsap,Css,3d,Gsap,我已经为旋转木马创建了一个原型，它的功能应该类似于流行的封面流交互，但是它将与div中的html一起用于描述流程中的步骤，而不是照片幻灯片。我用的是格林斯托克吐温马克斯图书馆 除了缩放问题之外，一切都很好。当每一步走到最前面时，它应该是最大的，但它不能正常工作。显然，我在某个地方应用了错误的东西 这是一把小提琴： 此外，还有一种更简单的方法可以将其模板化，以便将来添加更多步骤。目前我已经为卡片分配了CSS位置，但可能这不是必需的 欢迎提出建议 <!DOCTYPE html><h
<!DOCTYPE html><html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Carousel Steps</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<link rel="stylesheet" href="style-js.css"></link>
</head>
<body style="margin:0;padding:0;">
<div id="Stage">
<div id="Stage_navigation">
<div id="Stage_btn1" class="Stage_btn" >
<div class="button_holder" >
<div class="nav_button">
</div>
</div>
<div class="nav_button_label">
1
</div>
</div>
<div id="Stage_btn2" class="Stage_btn">
<div class="button_holder">
<div class="nav_button">
</div>
</div>
<div class="nav_button_label">
2
</div>
</div>
<div id="Stage_btn3" class="Stage_btn">
<div class="button_holder">
<div class="nav_button">
</div>
</div>
<div class="nav_button_label">
3
</div>
</div>
<div id="Stage_btn4" class="Stage_btn">
<div class="button_holder">
<div class="nav_button">
</div>
</div>
<div class="nav_button_label">
4
</div>
</div>
<div id="Stage_btn5" class="Stage_btn">
<div class="button_holder">
<div class="nav_button">
</div>
</div>
<div class="nav_button_label">
5
</div>
</div>
</div>
<div id="Stage_steps" class="Stage_steps">
<div id="Stage_step_four" class="pos3b">
<div class="step_container">
<div class="rectangle">
</div>
</div>
<div class="item_text">
Step 4
</div>
</div>
<div id="Stage_step_three" class="pos3a">
<div class="step_container">
<div class="rectangle">
</div>
</div>
<div class="item_text">
Step 3
</div>
</div>
<div id="Stage_step_five" class="pos2b">
<div class="step_container">
<div class="rectangle">
</div>
</div>
<div class="item_text">
Step 5
</div>
</div>
<div id="Stage_step_two" class="pos2a">
<div class="step_container">
<div class="rectangle">
</div>
</div>
<div class="item_text">
Step 2
</div>
</div>
<div id="Stage_step_one" class="pos1" >
<div class="step_container">
<div class="rectangle">
</div>
</div>
<div class="item_text">
Step 1
</div>
</div>
</div>
</div>
<script>
var b1 = document.getElementById("Stage_btn1");
var b2 = document.getElementById("Stage_btn2");
var b3 = document.getElementById("Stage_btn3");
var b4 = document.getElementById("Stage_btn4");
var b5 = document.getElementById("Stage_btn5");
var s1 = document.getElementById("Stage_step_one");
var s2 = document.getElementById("Stage_step_two");
var s3 = document.getElementById("Stage_step_three");
var s4 = document.getElementById("Stage_step_four");
var s5 = document.getElementById("Stage_step_five");
$(b1).click(function(){
TweenLite.to(s1, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
TweenLite.to(s2, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
TweenLite.to(s3, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s4, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s5, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
});
$(b2).click(function(){
TweenLite.to(s2, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
TweenLite.to(s3, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
TweenLite.to(s4, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s5, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s1, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
});
$(b3).click(function(){
TweenLite.to(s3, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
TweenLite.to(s4, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
TweenLite.to(s5, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s1, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s2, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
});
$(b4).click(function(){
TweenLite.to(s4, 2, {zIndex:500, position:"absolute", scaleX:1, scaleY:1, left:"0px", top:"0px", ease:Power4.easeOut});
TweenLite.to(s5, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
TweenLite.to(s1, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s2, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s3, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
});
$(b5).click(function(){
TweenLite.to(s5, 2, {zIndex:500, position:"absolute", scale:(1,1), left:"0px", top:"0px", ease:Power4.easeOut});
TweenLite.to(s1, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"-132px", top:"31px", ease:Power4.easeOut});
TweenLite.to(s2, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"-210px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s3, 2, {zIndex:100, position:"absolute", scaleX:0.72651, scaleY:0.72651, left:"320px", top:"51px", ease:Power4.easeOut});
TweenLite.to(s4, 2, {zIndex:300, position:"absolute", scaleX:0.82581, scaleY:0.82581, left:"200px", top:"31px", ease:Power4.easeOut});
});
</script>
</body>
</html>
问题在于你的数学。举例说明：
如果你把一件物品缩小到80%，你需要把它放大125%才能恢复到原来的尺寸。因此，当你将比例调整到“1”时，你实际上是在说它是当前大小的1倍我发现了很多错误。在我的CSS中，我错误地使用了scale属性，需要将其作为转换的一部分 此外，我还需要从pos1、pos2a等声明中去掉维度，并让缩放处理大小调整 无论如何，这是固定版本
谢谢你的帮助 您到底想要什么？您的小提琴中没有包含TweenMax库。它包含在Fiddle@luckyamit，我试图弄清楚为什么这些东西在向前和向后移动时不能正确缩放。正如穆布所说，小提琴不起作用，TweenMax不包括在内
body, html{
font-family: Arial, Helvetica, sans-serif;
}
#Stage{
position: relative;
-webkit-transform: translateZ(0);
background-color: rgb(255, 255, 255);
width: 950px;
height: 500px;
overflow: hidden;
}
/* NAVIGATION BUTTONS */
#Stage_navigation{
position: absolute;
margin: 0px;
left: 338px;
top: 456px;
width: 300px;
height: 32px;
right: auto;
bottom: auto;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.Stage_btn{
position: relative;
margin: 0px;
left: 0px;
top: 0px;
margin-left:20px;
width: 34px;
height: 32px;
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display:inline-block;
}
.nav_button{
position: absolute;
margin: 0px;
left: 0px;
top: 0px;
width: 34px;
height: 32px;
right: auto;
bottom: auto;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(192, 192, 192);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav_button_label{
position: absolute;
margin: 0px;
left: 12px;
top: 7px;
width: auto;
height: auto;
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 20px; color: rgb(0, 0, 0);
font-weight: normal;
text-decoration: none;
font-style: normal;
text-align: center
}
/* CONTENT PANELS */
.Stage_steps{
position: absolute;
margin: 0px;
left: 279px;
top: 28px;
width: 402px;
height: 415px;
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.step_container{
position: absolute;
margin: 0px;
left: 0px;
top: 0px;
width: 402px;
height: 415px;
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translate(-55px, -56px) translateZ(0px) rotate(0deg) scale(0.72651, 0.72651);
-webkit-transform-style: preserve-3d;
}
.rectangle{
position: absolute;
margin: 0px;
left: 0px;
top: 0px;
width: 496px;
height: 415px;
right: auto;
bottom: auto;
text-align: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform-style: preserve-3d;
-webkit-transform: translate(-47px, 0px) translateZ(0px) rotate(0deg)
}
.item_text{
position: absolute;
margin: 0px;
left: 99px;
top: 54px;
width: 80px;
height: auto;
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 20px;
color: rgb(0, 0, 0);
font-weight: normal;
text-decoration: none;
font-style: normal;
text-align: center;
}
.pos1{
position: absolute;
margin: 0px;
left: 0px;
top: 0px;
width: 402px;
height: 415px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(223, 223, 223);
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
scale:(1,1);
}
.pos2a{
position: absolute;
margin: 0px;
left: -132px;
top: 31px;
width: 332px;
height: 343px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(223, 223, 223);
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
scale:(0.82581,0.82581);
}
.pos2b{
position: absolute;
margin: 0px;
left: 200px;
top: 31px;
width: 332px;
height: 343px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(223, 223, 223);
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
scale:(0.82581,0.82581);
}
.pos3a{
position: absolute;
margin: 0px;
left: -210px;
top: 51px;
width: 292px;
height: 302px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(223, 223, 223);
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
scale:(0.72651, 0.72651);
}
.pos3b{
position: absolute;
margin: 0px;
left: 320px;
top: 51px;
width: 292px;
height: 302px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(223, 223, 223);
right: auto;
bottom: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
scale:(0.72651, 0.72651);
}