开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在jQuery中旋转Div元素

在jQuery中旋转Div元素，可以使用CSS3的transform属性来实现。以下是一个简单的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
   <button id="rotateBtn">旋转Div元素</button>
</body>
</html>

JavaScript代码：

$(document).ready(function() {
    var angle = 0;
    $("#rotateBtn").click(function() {
        angle += 45;
        $("#myDiv").css({
            "-webkit-transform": "rotate(" + angle + "deg)",
            "-moz-transform": "rotate(" + angle + "deg)",
            "-ms-transform": "rotate(" + angle + "deg)",
            "-o-transform": "rotate(" + angle + "deg)",
            "transform": "rotate(" + angle + "deg)"
        });
    });
});

在这个示例中，我们首先创建了一个红色的Div元素和一个按钮。当用户点击按钮时，我们使用jQuery的click事件来增加Div元素的旋转角度，并使用CSS3的transform属性来实现旋转效果。

需要注意的是，为了兼容不同的浏览器，我们需要添加不同浏览器的前缀，例如-webkit-、-moz-、-ms-、-o-等。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

纯CSS3绘制的逼真，呆萌，超酷的CSS3动画纯CSS3人物行走动画逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画超呆萌纯CSS3绘制可爱小男孩动画超酷面部表情

纯CSS3人物行走动画逼真炫酷CSS3动画 CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人物行走，而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个

01

H5C3第一节

CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状 PC端浏览器支持程度差，需要添加私有前缀移动端支持优于PC端不断改进中应用相对广泛关于私有前缀：在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性目前

01

【一起来烧脑】一步学会CSS3体系

background-image属性添加背景图片 background-size指定背景图像的大小 background-origin属性指定了背景图像的位置区域

02

CSS3制作心形头像

1.功能需求：最近有一个基于微信开发的Mobile Web项目，是一个活动页面。功能需求：用户使用微信扫描二维码，然后授权使用微信登录，然后读取用户的昵称和头像，然后显示在一个饼图上面。头像需要有一

CSS3-transform变形功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css变形功能</title> <style> body{ background-color: #b9eef0; } h3,p{ margin:100px 0px; padding-bottom: 10px;

05

css绘图，实现一些特殊形状

还是和前面的tips一样，多用after和before，能省俩标签！俩！比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="前端开发,CSS,HTML,XHTML,JS" /> <meta name="description" content="专注前端技术博客" /> <t

08

手把手教你玩转 CSS3 3D 技术

css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3

08

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡) 被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终想要的值。　　主要包括四个属性：　　　　执行变换的属性：transition-property 变换延续的时间：transition-duration 　　　　变换的速率变化：transition-timing-function 　　　　变换延迟时间:transition-delay。　　　　1.transition-propery 　　　　　　语法：transition-property:

CSS3-实现单选框radio的小动画

在微信上看到一个教程文，觉得制作的小动画还是很有意思的，自己也试验了一下。一开始动画怎么都不执行（我用的HB），因为内置浏览器对css3的不兼容。加上各种浏览器前缀后就好了。但是旋转那个效果，在HB里还是不能正常播放。总结就是：1，学习到了css3的伪类选择器还可以这样用！2，css3的动画设置还可以这样搭配！3，label可以替代radio。如果正常情况下让我想一个给radio 加动画的方法，我肯定不会想到把radio隐藏的！这是欲擒故纵啊。。。。以下是代码：

03

css 总结2 原

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ } div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 scaleY(n) 定义 2D 缩放转换，改变元素的高度。 transform:translate(0 ,-50%) rotate(45deg);

02

快速完成(图片旋转，查看原图)

一个小小的前端需求送给大家，使用js实现图片旋转，并且点击图片能够实现规定格式的大图。　　主要使用的是jQuery的delegate()方法实现图片旋转，该方法主要的功能就是给某个组件绑定一个或一组

08

收集整理一些css3的图片阴影效果

主要利用gradient，transform，配合after以及before伪元素来实现各种图片阴影，卷角效果。 <!DOCTYPE HTML> <html lang="en-US"> <head>

09

CSS3绘图实战-Nut团队标志

css每一代都会有革命性的更新，尽管目前还有一部分浏览器没有支持CSS3，就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋，一些早期不敢想象的东西，如今都可以用CSS来实现，比如，变型，渐变，

Emmet for Dreamweaver：HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：

03

Emmet for Dreamweaver：HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：

02

CSS3 translate、transform、transition区别

translate:移动，　　　　transform的一个方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50p

05

css3中的translate,transform,transition的区别

translate:移动，transform的一个方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100

04

给图片或文字加上鼠标悬浮时旋转动画

一个很简单的css即可实现图片或文字鼠标悬浮时旋转动画。这里就简单的说一下2d旋转。首先用到 transform 属性，具体代码如下： transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */ -webkit-transform:rotate(360deg); /* Safari 和 Chrome */ -o-transform:

03

4种方案解决CSS浏览器兼容性问题

前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。

01

一个CSS画的灰太狼,IE下属于重口味,慎看!

还有几个不错的,比如一个小日本制作的多啦A梦，一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常效果，Chrome下加了些简单的动画效果

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭