`

css3动画系列之rotate() 方法

阅读更多

浏览器支持情况:

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

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

 

rotate() 方法

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

 

实例

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 */

}

亲自试一试

值 rotate(30deg) 把元素顺时针旋转 30 度。

分享到:
评论

相关推荐

    CSS3skew倾斜、rotate旋转动画.doc

    CSS3 skew 倾斜、rotate 旋转动画是 CSS3 中的一种动画效果,通过使用 keyframes 来定义动画的每一帧,实现了倾斜、旋转之类的动画效果。本文将详细介绍如何使用 HTML 和 CSS3 来实现 skew 倾斜、rotate 旋转动画。...

    css3动画系列示例包

    在描述中提到的"css动画代码,一些demo"表明,这个压缩包包含了一系列的实例代码,这些代码是实际运行的示例,可以帮助学习者理解并应用CSS3动画。每个示例可能都是一个单独的CSS3动画效果,如旋转、平移、缩放、...

    CSS3动画的集合

    **CSS3 动画概述** CSS3(Cascading Style Sheets Level 3)是样式表语言的最新版本,为网页设计带来了许多强大的新特性,其中动画功能尤其引人注目。CSS3动画允许开发者通过纯CSS实现动态效果,无需依赖JavaScript...

    WebKit CSS3 动画基础

    **WebKit CSS3 动画基础** WebKit 是一个开源的网页渲染引擎,被广泛应用于苹果的 Safari 和谷歌的 Chrome 浏览器中。CSS3 动画是 Web 开发中的一个重要组成部分,它允许开发者通过时间序列控制元素的视觉变化,...

    css3动画详解

    尽管大多数现代浏览器都支持CSS3动画,但在开发时应考虑老版本浏览器的兼容性,可以借助前缀(如 `-webkit-`)和JavaScript库(如jQuery的`.animate()`方法)来确保更广泛的兼容性。 通过理解和熟练运用CSS3动画,...

    css3动画图标效果

    CSS3是层叠样式表(Cascading Style Sheets)的第三个主要版本,它引入了许多新的特性和功能,其中最引人注目的就是动画效果。在本主题“CSS3动画图标效果”中,我们将深入探讨如何利用CSS3来创建富有动态感的图标...

    css3鼠标悬停动画

    在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多创新特性,其中鼠标悬停动画就是一种增强用户体验的重要方式。通过利用CSS3的:hover伪类和各种动画属性,我们可以创建出丰富多彩的交互效果,使得用户在...

    好玩的css3动画效果

    CSS3 引入了一系列新的特性来增强网页的表现力,其中动画功能尤为突出。它通过变换(transform)、过渡(transition)和关键帧动画(animation)等技术让页面元素能够以更加生动的方式变化,为用户带来更好的交互体验。 #...

    行情css3动画

    这个jQuery抽奖插件可能还包括了一些优化措施,比如使用requestAnimationFrame进行动画的平滑渲染,或者在动画结束后自动清除CSS动画,以减少不必要的计算资源消耗。 总的来说,"行情css3动画"是一个结合了CSS3动画...

    Css3 animation---介绍如何实现css的动画

    在网页设计领域,CSS3(Cascading Style Sheets Level 3)引入了一种全新的动态效果——CSS3 Animation,它允许开发者通过纯CSS方式创建丰富的视觉动画,而无需依赖JavaScript或其他插件。这篇教程将深入探讨CSS3 ...

    纯CSS3实现的3D小球动画在线演示

    至于CSS3的关键帧动画`@keyframes`,它定义了动画从开始到结束的一系列样式变化。例如,可以定义小球上升和下落的速度、角度以及弹性反弹的效果。 例如,一个简单的关键帧动画定义可能如下: ```css @keyframes ...

    纯css3 3D旋转科技球体动画特效

    【纯CSS3 3D旋转科技球体动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果,它能够创建出引人入胜、富有动态感的科技风格球体旋转展示。在网页设计和开发中,这样的特效可以增强用户体验,使网站或应用...

    css3 3D邮寄信封打开动画特效

    "css3 3D邮寄信封打开动画特效"是利用CSS3的3D转换和动画特性来模拟信封从关闭到打开的过程,为用户创造一种视觉上的惊喜。这种特效常见于网站的登陆页面、通知提示或者创意展示中,可以增强用户的浏览体验。 1. **...

    css3加载动画

    在现代网页设计中,CSS3加载动画已经成为提升用户体验的重要元素之一。"齿轮"主题的CSS3加载动画尤其受到青睐,因为它既具科技感,又能直观地传达“正在处理”或“等待”的信息。本文将深入探讨如何利用CSS3创建轻量...

    css3模拟3D效果城市夜间行走动画特效

    本案例中,我们探讨的是"css3模拟3D效果城市夜间行走动画特效",这是一种利用CSS3的特性来创建逼真的3D城市场景,并配以夜间行走动画的创新技术。 首先,CSS3中的3D转换是实现这种特效的关键。3D转换包括translate...

    CSS3自行车动画特效

    **CSS3自行车动画特效详解** 在网页设计领域,CSS3(Cascading Style Sheets Level 3)的引入为创建动态、交互式的用户界面提供了强大的工具。本教程将深入探讨如何利用CSS3实现一个逼真的自行车动画特效。我们将...

    css3彩色3D文字上下漂浮动画特效

    总结起来,创建"css3彩色3D文字上下漂浮动画特效"涉及的关键技术点包括:CSS3的`@keyframes`动画、`transform`属性(尤其是`rotateX`和`rotateY`)、`perspective`属性(实现3D效果)、以及`animation`属性来组合...

    css3实现加载loading特效小动画效果

    CSS3的引入为开发者提供了更多创建动态和交互式元素的工具,其中之一就是制作加载(loading)动画效果。本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先,CSS3中的关键帧动画(@keyframes)是...

    纯CSS3雷达扫描模拟动画

    3. **动画(Animations)**:CSS3的动画允许我们定义一系列关键帧,元素会按照指定的时间和速度在这些关键帧之间进行动画过渡。雷达动画可能会用到`@keyframes`规则,定义雷达扫描的起始和结束状态,以及扫描过程中...

    css3鼠标悬停动画效果

    除了缩放效果,CSS3还提供了许多其他可用于鼠标悬停动画的属性,如旋转(`transform: rotate()`),透明度变化(`opacity`),位移(`transform: translate()`)等。比如,我们可以创建一个旋转并改变颜色的动画: `...

Global site tag (gtag.js) - Google Analytics