div
{
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
}

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

语法:transform:none|rotate(-8deg)...

也可以增加 keyframes 效果

@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
} @-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
} @-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
} @-o-keyframes spin {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}

转换(旋转)transform的更多相关文章

  1. Direct2D教程VI——转换(Transform)

    目前博客园中成系列的Direct2D的教程有 1.万一的 Direct2D 系列,用的是Delphi 2009 2.zdd的 Direct2D 系列,用的是VS中的C++ 3.本文所在的 Direct ...

  2. CSS3的2D 转换——旋转,缩放,translate(),skew(),matrix()

    2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸. ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持:   ⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀 ...

  3. CSS3 转换2D transform

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  4. 如何在命令行下运行kettle的作业(job)和转换(transform)

    pan 是执行转换的. Pan.bat /file C:\test.ktr /logfile c:\log.txt /level Basic kitchen是执行job的. kitchen.bat / ...

  5. DirectX11 学习笔记2 - 加入关键事件 实现视角转换 旋转

    上的程序的的基础上.在基类D3DBase添加摄像头功能 //录影机 void D3DBase::setCamera() { //关键事件 //假定A,S,D,W,Q,E,Z,X,C键被按下.动摄像机 ...

  6. 定量变量和定性变量的转换(Transform of Quantitative & Qualitative Variables)

    定量变量(Quantitative Variables):也称为数值型变量(Numerical Variables),可以用连续值或离散值表示.比如:气温(连续值),学生人数(离散值). 为什么要对定 ...

  7. CSS3新特性汇总

    新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 弹性盒模型 display: flex; 多列布局 column-count: 5; 媒体查询 @ ...

  8. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  9. 前端面试题之HTML和css-很实用的知识点

    display: none; 与 visibility: hidden; 的区别 相同: 它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间: ...

  10. 面试BAT,你凭什么说你掌握了CSS

    介绍 项目已经开源:https://github.com/nanhupatar... 欢迎PR 推荐 关注我们的公众号 display: none; 与 visibility: hidden; 的区别 ...

随机推荐

  1. 关闭火狐定期向“http://detectportal.firefox.com/”发包

    问题:最近发现火狐总是向http://detectportal.firefox.com/发包 办法:firefox地址栏输入 about:config,然后搜索找到 network.captive-p ...

  2. AOP技术应用于安全防御与漏洞修复

    本文用到的技术 AOP ESAPI 关于AOP技术 AOP(Aspect-Oriented Programming)面向切面编程.切面是什么?切面表示从业务逻辑分离出来的横切逻辑,比如性能监控.日志记 ...

  3. Web.config配置文件详解(新手必看) 【转】

    来源 :http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html 花了点时间整理了一下ASP.NET Web.config配置 ...

  4. AAuto无法关闭CMD窗口怎么办

    如下图所示,当执行了io.print函数之后,打开的CMD窗口无法使用关闭按钮关闭,其实只要点击左上角的控制台,把钩去掉,该窗口即可关闭.

  5. 以其他字段作为某一字段的值. 字段长度char_length(?)

    UPDATE t_dealer a INNER JOIN t_dealer b ON a.id=b.id SET a.zihao=b.shortName where a.zihao is null o ...

  6. Odoo11 重大改变

    Table of Contents 新特性 Activity 项目子任务 组织架构 地址 域 widget 功能重构 Quant 份 procurement 补货 自动动作 动作绑定 去掉了stock ...

  7. -ROOT-表和.META.表结构详解

    在<HBase技术简介>中我们知道,HBase中有两个特殊的表:-ROOT-和.META.. 由于HBase中的表可能非常大,故HBase会将表按行分成多个region,然后分配到多台Re ...

  8. 【Android】内存卡图片读取器,图库app

    上一篇<[Android]读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示>(点击打开链接)在真机上測试非常有问题.常常遇到内存溢出.卡死的情况.由于如今真机上的内存上,2G ...

  9. Xen on Ubuntu

    实验环境 ubuntu-14.04.1-desktop-amd64.iso Recommended reference: https://help.ubuntu.com/community/Xen h ...

  10. NSTimer使用不当引发的内存泄漏问题

    NSTimer可以用来执行一些定时任务,比较常用的方法就是: + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTar ...