这个库只有一段代码function $(element) { return documentgetElementById(我被你搞晕了,jQuery的选择器可是支持css3的,你这么选择id有点画蛇添足了
js和jquery做不到的，首先这个是css3中的3d转换，用到transform：rotateX(50deg) ，只不过是旋转中心要在你画的线中间，设置transform-origin:50% 0; （这里是xy轴，可以理解为集合第四项现，所以旋转轴所在位置就是红色箭头位置的坐标，x和-y）
整理代码：
div{ width:500px; height:500px; background:#333; transform-origin:50% 0; transform:rotateX(50deg);
如有疑问欢迎咨询
这是CSS3里面的属性,
以中心为圆点旋转:transform-origin:center 0px;
旋转角度:transform:rotate(360deg);
顺时针旋转角度;
旋转角度可以写在js代码里,点击旋转或者加载页面旋转都行
封装一个对象来实现吧。配合css3实现。
var getVCode = {
get: function(len, cbk) {
var res = [];//包含随机字符的dom元素都在这里面
for ( var i = 0; i < len; i++ ) {
var char = thisrandomChar();
var wrapper = $("<span></span>");
wrappertext( char );
respush( wrapper );
}
if ( cbk ) {
} else {
return res;//没有回调函数，则返回数组
}
},
randomChar: function() {
var char = StringfromCharCode( randomAsc() );//随机生成字符
return char;
},
rotateChar: function( ele ) {
elecss("transform", "rotate(" + thisrandomDeg() + "deg)");//给传入的元素设置随机倾斜角度
},
randomDeg: function() {
return Mathround(Mathrandom360);
}，
randomAsc：function() {
var number = "";
//这里根据你的需求来写生成随机ascii码的代码
}
}
调用get方法来 *** 作：
new getVCodeget( 4, function( data ) {} );生成4个随机带倾斜的字符并用回调函数进行处理
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: #2C3437;
}
pie {
width: 200px;
height: 200px;
background-color: white;
border-radius: 100px;
position: absolute;
}
pie1 {
clip: rect(0px,200px,200px,100px);
}
pie2 {
clip: rect(0px,100px,200px,0px);
}
hold {
width: 200px;
height: 200px;
position: absolute;
z-index: 1;
}
hold1 {
clip: rect(0px,200px,200px,100px);
}
hold2 {
clip: rect(0px,100px,200px,0px);
}
bg {
width: 200px;
height: 200px;
background-color: green;
border-radius: 100px;
position: absolute;
}
time {
width: 160px;
height: 160px;
margin: 20px 0 0 20px;
background-color: #2C3437;
color: white;
border-radius: 100px;
position: absolute;
z-index: 1;
text-align: center;
line-height: 160px;
}
</style>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"></div>
<div class="time">0</div>
<script src="jquery-180minjs"></script>
<script>
i = 0;
j = 0;
count = 0;
function start1() {
i = i + 06;
count = count + 1;
if (count >= 300) {
count = 0;
clearInterval(t1);
t2 = setInterval("start2()", 10);
};
$("time")text(Mathceil(i100/360));
$("pie1")css("-o-transform", "rotate(" + i + "deg)");
$("pie1")css("-moz-transform", "rotate(" + i + "deg)");
$("pie1")css("-webkit-transform", "rotate(" + i + "deg)");
};
function start2() {
j = j + 06;
count = count + 1;
if (count >= 300) {
count = 0;
clearInterval(t2);
};
$("time")text(Mathceil((j+i)100/360));
$("pie2")css("-o-transform", "rotate(" + j + "deg)");
$("pie2")css("-moz-transform", "rotate(" + j + "deg)");
$("pie2")css("-webkit-transform", "rotate(" + j + "deg)");
};
t1 = setInterval("start1()", 10);
</script>
</body>
</html>
以上就是关于一段JS jQuery代码里面的一些问题全部的内容，包括:一段JS jQuery代码里面的一些问题、用JS或jquery或CSS3做到旋转。。、js或jQuery实习图片以中心360度的旋转特效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）