css旋转度的有效范围

css旋转度的有效范围,css,rotatetransform,Css,Rotatetransform,我通过在变换:旋转(xxdeg)上旋转时钟指针来构建时钟。在这个时钟中,秒针的度数每秒增加6度,因此长时间运行后,该值将达到最大值 我想知道CSS学位是否有一个有效的范围。我已经搜索过了,但没有结果。我在哪里可以找到像这样的信息 我已经测试了我的代码,当二次值的初始值超过18位时,它就不起作用了。 秒度=90+(秒/60)*360+100000000000000; 你可以看到↓ const secHand=document.querySelector('.secHand'); const

我通过在
变换:旋转(xxdeg)
上旋转时钟指针来构建时钟。在这个时钟中,秒针的度数每秒增加6度,因此长时间运行后,该值将达到最大值

我想知道CSS学位是否有一个有效的范围。我已经搜索过了,但没有结果。我在哪里可以找到像这样的信息

我已经测试了我的代码,当二次值的初始值超过18位时,它就不起作用了。

秒度=90+(秒/60)*360+100000000000000;
你可以看到↓

const secHand=document.querySelector('.secHand');
const minHand=document.querySelector('.minHand');
const hourHand=document.querySelector(“.hourHand”);
设secondDeg=0,
minDeg=0,
hourDeg=0;
设置日期();
函数setDate(){
const date=新日期();
const second=date.getSeconds();
const min=date.getMinutes();
const hour=date.getHours();
秒度=90+(秒/60)*360+100000000000000;
//二手车的初始度数值。
//当它超过1000000000000000时,时钟不工作。
minDeg=90+(分钟/60)*360+((秒/60)/60)*360;
小时数=90+(小时/12)*360+((分钟/60)/12)*360+((秒/60)/60)/12)*360;
}
函数updateDate(){
二次度+=(1/60)*360;
minDeg+=((1/60)/60)*360;
hourDeg+=((1/60)/60)/12);
secHand.style.transform=`rotate(${secondDeg}deg)`;
minHand.style.transform=`rotate(${minDeg}deg)`;
hourHand.style.transform=`rotate(${hourDeg}deg)`;
}
设置间隔(更新日期,1000)
时钟{
宽度:15雷姆;
高度:15雷姆;
边界半径:50%;
背景:rgba(0,0,0,4);
}
.钟面{
宽度:100%;
身高:100%;
转换:translateY(-3px);
}
.手{
宽度:50%;
背景:#fff;
位置:绝对位置;
最高:50%;
右:50%;
变换原点:100%50%;
变换:旋转(90度);
过渡计时功能:立方贝塞尔(0.9,0.54,0.26,1.68);
}
.钟面:之后{
宽度:2米;
高度:2米;
左:50%;
最高:50%;
位置:绝对位置;
显示:块;
内容:'';
背景色:#a8c5d1;
边界半径:50%;
转换:翻译(-50%,-50%);
}
.时针{
宽度:40%;
高度:10px;
页边顶部:-5px;
过渡:所有3s;
}
min hand先生{
宽度:45%;
高度:5px;
利润上限:-2.5px;
过渡:全部1秒;
}
.二手货{
高度:2倍;
页边顶部:-1px;
背景色:红色;
}

似乎没有限制。 我为你做了一个小演示。单击段落时,段落会旋转(并设置动画5秒)。最后两个旋转20位数值(1238739872598740096度),最后一个为负

$(文档).ready(函数(){
$('div')。在('click','p',函数(el)上{
$(el.target).toggleClass('reset');
});
});
p{显示:内联块;转换:转换5s;}
div:n类型(1)p{变换:旋转(15度);}
div:n类型(2)p{变换:旋转(150度);}
div:n类型(3)p{变换:旋转(1500度);}
div:n类型(4)p{变换:旋转(15000度);}
div:n类型(5)p{变换:旋转(14010deg);}
div:n类型(6)p{变换:旋转(1238739872598740096deg);}
div:n类型(7)p{transform:rotate(-1238739872598740096deg);}
p、 重置{变换:旋转(0度)!重要;}

示例文本

示例文本

示例文本

示例文本

示例文本

霍格旋转


反向旋转

具体到角度,我相信它会接受任何数字,然后除以360来计算

例如:

.box{
显示器:flex;
证明内容:中心;
对齐项目:居中;
宽度:100px;
高度:100px;
利润率:10px;
颜色:白色;
}
#一个{
背景色:红色;
变换:旋转(-358度);
}
#两个{
背景颜色:橙色;
变换:旋转(-718度);
}
#三{
背景颜色:绿色;
变换:旋转(358度);
}
#四{
背景颜色:蓝色;
变换:旋转(718度);
}
-358
-718
358

718
您可以将xx度设置为从负最小可能值到任何最大可能值的范围,但结果将介于0到360之间。我不认为这有任何特定的范围。@DeepakBandi结果不会在0到360之间,除非
%
它,所以1°与361°不同。当我将该值从360°设置为1°时,动画将反向旋转为1°。很好的示例;)