全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
首页 > 技术干货 > 软件开发 > > 怎么样实现一个div左右翻转180度 用JavaScript和css
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

怎么样实现一个div左右翻转180度 用JavaScript和css

发布时间:4 周 前 栏目:软件开发 浏览:

1、怎么样实现一个div左右翻转180度 用JavaScript和css

YuGiOh

#div{

position:absolute;

top:50px;

left:300px;

width:300px;

height:300px;

line-height:300px;

text-align:center;

border:1pxsolidblack;

}

varrotateHTML5=function(limit)

{

varreg=/(rotate\\([\\-\\+]?((\\d+)(deg))\\))/i;

varwt=div.style[\'-webkit-transform\'],wts=wt.match(reg);

var$2=RegExp.$2;

console.log($2);

div.style[\'-webkit-transform\']=wt.replace($2,parseFloat(RegExp.$3)+limit+RegExp.$4);

}

varrotateIE=function(obj)

{

vard=!!obj.d?obj.d:1;

varr=d*Math.PI/180;

costheta=Math.cos(r);

sintheta=Math.sin(r);

obj.style.filter="progid:DXImageTransform.Microsoft.Matrix()";

varitem=obj.filters.item(0);

varwidth=obj.clientWidth;

varheight=obj.clientHeight;

item.DX=-width/2*costheta+height/2*sintheta+width/2;

item.DY=-width/2*sintheta-height/2*costheta+height/2;

item.M11=costheta;

item.M12=-sintheta;

item.M21=sintheta;

item.M22=costheta;

obj.timer=setTimeout(function()

{

vardx=d+1;

dx=dx>360?1:dx;

obj.d=dx;

rotate(obj,dx);

},30);

};

varstart=function()

{

if(!!div.interval)

{

clearInterval(div.interval);

deletediv.interval;

}

else

{

div.interval=setInterval(function()

{

/.*webkit.*/i.test(navigator.userAgent)?rotateHTML5(1):rotateIE(div);

},30);

}

}

rotate

ROTATE

怎么样实现一个div左右翻转180度 用JavaScript和css

2、单击div,使其顺时针旋转180°

单击div,使其顺时针旋转180°不用jQuery

怎么样实现一个div左右翻转180度 用JavaScript和css

3、CSS transform中的rotate的旋转中心怎么设置

1、我们用两个相同的div编辑它,这是基本的div代码。

2、这是一个没有旋转的div。然后我们只设置灰蓝色div的旋转,以便我们确切地知道旋转中心点是什么。

3、设置灰蓝色div是使用.t类名,然后使用变换,然后旋转。注意角度是deg,这里我们设置旋转45度。

4、然后查看对比度,灰色蓝色div已旋转,旋转的中心点默认为div的中心。

5、如果我们想设置旋转的中心点,我们可以使用transform-origin属性。将旋转中心设置为左上角,这意味着左上角是旋转中心。

6、此时,旋转中心已经改变,它已经变为左上角。效果如下。

4、css怎么设置图片定点旋转

使用CSS3 transform 属性设置元素旋转。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法:transform: none|transform-functions;

可能值

实例 旋转 div 元素:

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg);/*IE9*/

-moz-transform:rotate(7deg);/*Firefox*/

-webkit-transform:rotate(7deg);/*Safari和Chrome*/

-o-transform:rotate(7deg);/*Opera*/

}

浏览器支持

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号