在y轴上旋转整个身体

Question

我创建了一个带有< pre >标签的简笔画，我想在其Y-Axis中旋转整个人物。我试图找出rotate Y-axis,身体中部的 @keyframes rotate{ 0% {transform:rotate(0deg);} 50% {transform:rotate(135deg);} 0% {transform:rotate(0deg);} } @keyframes rotate2{ 0% {transform:rotate(0deg);} 50% {transform:rotate(-135deg);} 0% {transform:rotate(0deg);} } @keyframes rotate3{ 0% {transform: rotateY(0deg);} 50% {transform: rotateY(360deg);} 0% {transform: rotateY(0deg);} } pre{ position:absolute; text-shadow: 10px 10px 3px #DCDCDC; font-size: 400%; } div{ border-bottom: 5px solid magenta; position:absolute; width: 160px; left:200px; bottom:50px; /*margin-top: 0px;*/ /*margin-bottom: 0px;*/ } .head{ position:absolute; animation-duration:4s; animation-name:rotate3; animation-iteration-count:infinite; } .legs{ position:absolute; animation-duration:4s; animation-name:rotate3; animation-iteration-count:infinite; } .leftleg.rightleg{ position:absolute;} .stomach{ position:absolute; animation-duration:4s; animation-name:rotate3; animation-iteration-count:infinite; } .rightarm{ position:absolute; transform-origin:top right; animation-iteration-count: infinite; animation-name:rotate; animation-duration: 4s; } .leftarm{ position:absolute; transform-origin: top left; animation-name:rotate2; animation-iteration-count: infinite; animation-duration: 4s; } .arms{ position:absolute; animation-duration:4s; animation-name:rotate3; animation-iteration-count:infinite; }但它总是不合适的。

以下是现在的样子：

＆＃13;

＆＃13;

<pre>
	 <span class="all"><span class="head">o</span>
	<span class="arms"><span class="rightarm">/</span> <span class="stomach">O</span> <span class="leftarm">\</span></span>
	<span class="legs"><span class="rightleg">/</span> <span class="leftleg">\</span></span><span>
	<div></div>
</pre>

＆＃13;

var user = firebase.auth().currentUser;
var key = user.uid;

// Set path for created user to be UID
var createProfileRef = firebase.database().ref("profiles/" + key);
var info;
createProfileRef.on("value", function(snapshot) {
  var getData = snapshot.val();
  info = Object.keys(getData)[0];
});

// Save Plan to logged inn user
var sendData = firebase.database().ref("profiles/" + key + "/" + info + sendDate);

savePlan(sendFat, sendProtein, sendCarbohydrate);
function savePlan(sendFat, sendProtein, sendCarbohydrate) {
  var addData = sendData.push();
    addData.set({
    Macros_Fat: sendFat,
    Macros_Protein: sendProtein,
    Macros_Carbohydrate: sendCarbohydrate,
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

将transform-origin: left添加到.stomach

 @keyframes rotate{
0% {transform:rotate(0deg);}
50% {transform:rotate(135deg);}
0% {transform:rotate(0deg);}
 }
 
  @keyframes rotate2{
0% {transform:rotate(0deg);}
50% {transform:rotate(-135deg);}
0% {transform:rotate(0deg);}
 }
 
@keyframes rotate3{
 0% {transform: rotateY(0deg);}
 50% {transform: rotateY(360deg);}
 0% {transform: rotateY(0deg);}
 }

 
pre{
position:absolute;
text-shadow: 10px 10px 3px #DCDCDC;
font-size: 400%;
}


div{
border-bottom: 5px solid magenta;
position:absolute;
width: 160px;
left:200px;
bottom:50px;
/*margin-top: 0px;*/
/*margin-bottom: 0px;*/
}

.head{
 position:absolute;
animation-duration:4s;
animation-name:rotate3;
animation-iteration-count:infinite;
}




 
.legs{
 position:absolute;
animation-duration:4s;
animation-name:rotate3;
animation-iteration-count:infinite;
}

.leftleg.rightleg{
position:absolute;}
 

 
.stomach{
 position:absolute;
animation-duration:4s;
animation-name:rotate3;
animation-iteration-count:infinite;
transform-origin: left;
}

 
.rightarm{
position:absolute;
transform-origin:top right;
animation-iteration-count: infinite;
animation-name:rotate;
animation-duration: 4s;
}

.leftarm{
 position:absolute;
 transform-origin: top left;
 animation-name:rotate2;
 animation-iteration-count: infinite;
animation-duration: 4s;
}

.arms{
 position:absolute;
animation-duration:4s;
animation-name:rotate3;
animation-iteration-count:infinite;
}

<pre>
	 <span class="all"><span class="head">o</span>
	<span class="arms"><span class="rightarm">/</span> <span class="stomach">O</span> <span class="leftarm">\</span></span>
	<span class="legs"><span class="rightleg">/</span> <span class="leftleg">\</span></span><span>
	<div></div>
</pre>