1、语法:

transform: none |  <transform-function> [<transform-function>]*

2、取值:

  • none                                  ----不进行变化
  • <transform-function>         ----一个或多个变换函数,以空格分开
 
可以用于内联元素和块级元素,可以实现旋转、缩放、移动等等效果。具体如下:
 
  • rotate ---旋转
  1. /*
  2. rotate(<angle>)
  3. 通过指定的角度对元素指定一个2D旋转
  4. 需要先有一个transform-origin属性的定义
  5. transform-origin是旋转的基点
  6. angle是旋转的角度,正值表示顺时针,负值表示逆时针
  7. deg为度的意思,如60deg表示60度
  8. */
  9. #test{
  10. transform:rotate(60deg);                //w3c标准
  11. -webkit-transform:rotate(60deg);   //webkit内核的safari和chrome
  12. -moz-transform:rotate(60deg);      //ff
  13. -o-transform:rotate(60deg);          //opera
  14. -ms-transform:rotate(60deg);       //IE9
  15. }
 

css3动画属性系列之transform细讲旋转rotate的更多相关文章

  1. css3动画属性系列之transform细讲scale缩放

    下面我们从3个方面开始介绍: 1.scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的. ...

  2. CSS3动画属性:变形(transform)

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

  3. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  4. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  5. Css3动画属性总汇

    http://css3lib.alloyteam.com/uilib/animation/demo1/#cta Css3动画属性总汇 Stay hungry. Stay foolish. Attent ...

  6. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

  7. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  8. 使用CSS3动画属性实现各种旋转跳跃

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

  9. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

随机推荐

  1. 在CentOS7命令行模式下安装虚拟机

    转载:https://blog.csdn.net/sunnyfg/article/details/51493602 1.主机环境描述: 操作系统:CentOS7 系统GUI:无 CPU:Intel4代 ...

  2. PHP之数组(遍历顺序)

    作者: Laruence(   ) 本文地址: http://www.laruence.com/2009/08/23/1065.html PHP的数组, 如果用foreach来访问, 遍历的顺序是固定 ...

  3. Scrapy 笔记(三)

    摘抄自Python 一.随机user-agent 的设置 关于配置和代码 这里我找了一个之前写好的爬虫,然后实现随机更换User-Agent,在settings配置文件如下: DOWNLOADER_M ...

  4. SPOJ GSS3-Can you answer these queries III-分治+线段树区间合并

    Can you answer these queries III SPOJ - GSS3 这道题和洛谷的小白逛公园一样的题目. 传送门: 洛谷 P4513 小白逛公园-区间最大子段和-分治+线段树区间 ...

  5. 20169211《Linux内核原理与分析》第三周作业

    假期中抽时间学习了一下linux内核的启动过程,在此做一下学习总结. Linux启动过程描述: 1.启动BootLoader 2.Linux系统的初始化 3.Linux的应用程序的初始化 通用寄存器的 ...

  6. DP 题集 2

    关于 DP 的一些题目 String painter 先区间 DP,\(dp[l][r]\) 表示把一个空串涂成 \(t[l,r]\) 这个子串的最小花费.再考虑 \(s\) 字符串,\(f[i]\) ...

  7. open -python操作文件

    一打开文件 二操作文件 三关闭文件 open(文件,模式,编码),打开文件----->0101010(以二进制的方式打开)------>编码(open默认utf-8编码)------> ...

  8. python一行代码开启http

    python -m SimpleHTTPServer 8000 & 监听8000端口 浏览器用127.0.0.1:8000访问 如果出现no module named SimpleHTTPSe ...

  9. poj 1984 并查集

    题目意思是一个图中,只有上下左右四个方向的边.给出这样的一些边, 求任意指定的2个节点之间的距离. 就是看不懂,怎么破 /* POJ 1984 并查集 */ #include <stdio.h& ...

  10. bzoj 4780: [Usaco2017 Open]Modern Art 2

    4780: [Usaco2017 Open]Modern Art 2 Time Limit: 10 Sec  Memory Limit: 128 MB Description Having becom ...