[英]How do I rotate an object 90 degrees using JQuery
I am trying to manipulate my html using jquery and would like to rotate the object 90 degrees so the head of the object precedes the tail. 我可以使用關鍵幀將 object 從右上角移動到左下角 - 但是它以水平方式轉移,而不是像我希望的那樣以更垂直的方式轉移。
這是我的代碼:
<div class="f p-2"></div>
@keyframes particleAnimationFlorida
{
0% {
transform: translateX(-10px) translateY(0px)
}
100% {
transform: translateX(-50px) translateY(300px);
}
}
$(".f").css({"position": "absolute", "width": "10px", "height": "1px", "top": "110px",
"right": "400px", "background-color": "black", "animation-name": "particleAnimationFlorida",
"animation-timing-function": "linear", "animation-iteration-count": "11" });
$(".p-2").css({"position": "absolute", "display": "block", "content": "''", "width": "50px",
"height": "1px", "background": "linear-gradient(-10deg, rgba(0,0,0,0) 0%,rgba(0,0,255,0.8)
100%)", "transform": "translateX(10%) rotateZ(10deg)", "animation-duration": "3s"});
這是我的小提琴:
https://jsfiddle.net/bullybear/m826gkrt/212/
您的 animation 將覆蓋您的 JavaScript 設置的旋轉。 將旋轉變換添加到 animation 中的每個關鍵幀。
@keyframes particleAnimationFlorida
{
0% {
transform: translateX(-10px) translateY(0px) rotateZ(-80deg);
}
100% {
transform: translateX(-50px) translateY(300px) rotateZ(-80deg);
}
}
在 CSS 代碼中添加旋轉(xdeg),x - 旋轉
@keyframes particleAnimationFlorida {
0% {
transform: translateX(-10px) translateY(0px) rotate(90deg);
}
100% {
transform: translateX(-50px) translateY(300px) rotate(90deg);
}
}
只需將rotate(90deg)
添加到您的transform
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.