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. [原创]Getting Started with Skywalking

    Getting Started with Skywalking Pre JDK 1.8+ Skywalking(v3.2.6) (All packages can be download from G ...

  2. 多源最短路径Floyd算法

    多源最短路径是求图中任意两点间的最短路,采用动态规划算法,也称为Floyd算法.将顶点编号为0,1,2...n-1首先定义dis[i][j][k]为顶点 i 到 j 的最短路径,且这条路径只经过最大编 ...

  3. 【音乐App】—— Vue-music 项目学习笔记:搜索页面开发

    前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 搜索歌手歌曲 搜索历史保存 ...

  4. 转:Kafka、RabbitMQ、RocketMQ消息中间件的对比 —— 消息发送性能 (阿里中间件团队博客)

    from: http://jm.taobao.org/2016/04/01/kafka-vs-rabbitmq-vs-rocketmq-message-send-performance/ 引言 分布式 ...

  5. HTML5 Canvas 八星聚义动态效果

    昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...

  6. Codeforces445A_DZY Loves Chessboard(预处理)

    DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. dockerfile VOLUME 对外暴露目录设置问题

    最近遇到一个特殊问题, 容器对外映射挂载目录 , 发现容器中的目录并没有映射到宿主机上. 后经排查是是镜像中没有指定 volume # 例如 FROM debian:wheezy VOLUME /da ...

  8. python 查询,子查询以及1对多查询

    1.添加数据: # 方法1:对象.save() book = Book(**kwargs) book.save() # 方法2:类.create(**kwargs) Book.create(**kwa ...

  9. scramble-string——两个字符串经过树化并旋转后是否一致、递归、动态规划

    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...

  10. same-tree——比较两个二叉树是否相同

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...