CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。

下面说一下CSS3的一个属性:transform

其实字面上的意思已经很明显了就是变化,变幻的意思。

那到底怎么个变法?

transform可以选下面几个值:

  1. 旋转-rotate(rotatex,rotatey)
  2. 倾斜-skew
  3. 缩放-scale
  4. 移动-translate

下面给出的例子可能都非常简单,真正详细的还是看W3School毕竟是定期更新的


1.rotate

a.rotate{
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);/*没有火狐的前缀,已经规范了*/
}

不知道大家知道不知道这里的20deg是什么意思,deg是度的意思大家都知道。然后20deg就是正向旋转20度,当然也有负向旋转的,上面代码全部改成-10deg之后就是下面这样,看下面:

应该很清楚了,默认的旋转中心是矩形高和宽的中点


2.skew

a.skew{
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);/*没有火狐的前缀,已经规范了*/
}

斜切20度是什么概念?想象用手指从右边推矩形然后矩形像果冻一样倾斜了,倾斜的角度和原来的角度相差20度


3.scale

a.scale{
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);/*没有火狐的前缀,已经规范了*/
}

原来的是没放大是下面这样的:


4.translate

a.translate{
-webkit-transform: translate(250px,10px);
-ms-transform: translate(250px,10px);
-o-transform: translate(250px,10px);
transform: translate(250px,10px);/*没有火狐的前缀,已经规范了*/
}

原来的是没移动的时候是下面这样的,可能translateY看不太出来,但是X就非常明显了,translateY的大家脑补一下:


5.transform综合

a.transform:hover{
-webkit-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
-ms-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
-o-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);
transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);/*没有火狐的前缀,已经规范了*/
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;/*没有火狐和IE的前缀,已经规范了*/
}

鼠标hover一下你懂的

感觉自己总结的都很水,不过还是方便翻阅和学习的

点击查看原文:原文地址

CSS3的transform属性的更多相关文章

  1. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  2. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  3. css3使用transform属性制作js弹性运动

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. 吃透css3之3d属性--perspective和transform

    本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...

  8. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  9. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

随机推荐

  1. iptables 实际操作 之 规则查询 2

    在之前的文章中,我们已经总结过,iptables 为我们预定义了4张表,他们分别是raw 表,mangle表,nat表,filter表,不同的表拥有不同的功能. filter 负责过滤功能,比如允许那 ...

  2. 内核源码阅读vim+cscope+ctags+taglist

    杜斌博客:http://blog.db89.org/kernel-source-read-vim-cscope-ctags-taglist/ 武特博客:http://edsionte.com/tech ...

  3. easy 正则表达式验证 封装

    基于EasyUI ValidateBox 的表单验证,可以直接写正则表达式. 在页面加载时执行下面代码 if ($.fn.form) { $.extend($.fn.validatebox.defau ...

  4. Java中Solr集群的测试

    import org.apache.solr.client.solrj.impl.CloudSolrServer; import org.apache.solr.common.SolrInputDoc ...

  5. CodedUI Test 测试WPF程序,无法获取控件属性值的解决方法

    注意注意!ItemStatus 在VS2010的CUIT里面是没有的!需要2013以上的版本才可使用. 公司新程序使用WPF制作,但使用CodedUI Test进行自动化测试的时候,很多控件抓取不到其 ...

  6. 亚马逊订单api重构 api异常入库 在php中执行python

    https://docs.python.org/2/library/xml.etree.elementtree.html python  较 php能更高效第处理xml xpth php  扮演什么角 ...

  7. bat masterNodeRun.bat

    C:\> compare C:\> compare C:\>D:\cmd\wphp.bat C:\> compareReq -- :: TODO StartScript -- ...

  8. 【python】-- Django Form

    Django  Form Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容(自定义样式) 一.F ...

  9. 比较运算符compareTo()、equals()、==之间的区别

    前言 首先再次强调hashcode (==)和equals的真正含义(我记得以前有人会说,equals是判断对象内容,hashcode是判断是否相等之类): equals:是否同一个对象实例.注意,是 ...

  10. PEP8 Python 编码规范整理(Python)

    add by zhj: 这个是豆瓣网友整理的PEP8,算是PEP8的一个简易版本,因为原PEP8内容太多,所以建议先看这篇文章,然后再看PEP8中文翻译 原文:http://www.douban.co ...