<html>

<head>

    <title>css2</title>

    <style type="text/css">

        div{

            width: 200px;

            height:200px;

            font-size: 65px;

        }

    /*    1.translate()      根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 */

        .translate{

            background: red;

            transform: translate(50px,100px);

            -ms-transform: translate(50px,100px); /* IE 9 */

            -webkit-transform: translate(50px,100px); /* Safari and Chrome */

        }

        /*旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转*/

        .rotate{

            background: blue;

            -webkit-transform: rotate(45deg);

              transform: rotate(45deg);

        }

        /*skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）*/

        .skew{

            background: orange;

            -webkit-transform: skew(45deg,50deg);

              transform:skew(45deg,50deg);

        }

        /*缩放 scale()函数 让元素根据中心原点对对象进行缩放*/

        .scale{

            background: green;

            -webkit-transform: scale(1.5,0.5);

              transform: scale(1.5,0.5);

        }

        /*matrix() 所有 2D 转换方法组合在一起，用来指定一个2D变换，允许您：旋转、缩放、移动以及倾斜元素。是一个矩阵。*/

        .matrix{

            background: gray;

            -webkit-transform: matrix(1,0,0,1,100,100);

              transform: matrix(1,0,0,1,100,100);

        }

        /*transform-origin对元素进行原点位置改变*/

        /*rotateX元素围绕其 X 轴以给定的度数进行旋转*/

        .rotateX{

            background: yellow;

            transform: rotateX(120deg);

            -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */

            -moz-transform: rotateX(120deg);

        }

        /*rotateY元素围绕其 Y 轴以给定的度数进行旋转*/

        .rotateY{

            background: pink;

            transform: rotateY(130deg);

            -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */

            -moz-transform: rotateY(130deg);

        }

        /*transition属性是一个复合属性，主要包括以下几个子属性：

            transition-property:指定过渡或动态模拟的CSS属性

            transition-duration:指定完成过渡所需的时间

            transition-timing-function:指定过渡函数

            transition-delay:指定开始出现的延迟时间

        */

        .transition{

            background: purple;

            transition: width 2s;

            -moz-transition: width 2s;    /* Firefox 4 */

            -webkit-transition: width 2s;    /* Safari 和 Chrome */

            -o-transition: width 2s;

        }

        .transition:hover{

            width:400px;

        }

        /*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

        animate 属性规定所有动画属性的简写属性，除了 animation-play-state 属性。

        动画的名称:animation-name;

        动画的时长:animation-duration;

        动画播放方式(速度曲线):animation-timing-function;

        动画开始播放的时间:animation-delay;

        动画播放次数:animation-iteration-count;

        动画播放方向:animation-direction;

        动画的播放状态:animation-play-state;

        动画时间外属性:animation-fill-mode;

        */

        .animation{

            animation:an1 5s;

            -moz-animation:an1 5s;    /* Firefox */

            -webkit-animation: an1 5s;    /* Safari 和 Chrome */

            -o-animation: an1 5s;

        }

        .animation2{

            animation:an2 5s;

            -moz-animation:an2 5s;    /* Firefox */

            -webkit-animation: an2 5s;    /* Safari 和 Chrome */

            -o-animation: an2 5s;

        }

        @keyframes an1{

            from{background: red;}

            to{background: yellow;}

        }

        @keyframes an2{

            0%{background: red;}

            25%{background: yellow;}

            50%{background: blue;}

            100%{background: black;}

        }

    </style>

</head>

<body>

    <!-- 2D转换 -->

    <div class='translate'></div>

    <div class='rotate'></div>

    <div class='skew'></div>

    <div class='scale'></div>

    <div class='matrix'></div>

    <!-- 3D转换 -->

    <div class='rotateX'>hello word</div>

    <div class='rotateY'>hello word</div>

    <!-- 过渡 -->

    <div class='transition'></div>

    <!-- 动画 -->

    <div class='animation'></div>

    <div class='animation2'></div>

</body>

</body>

</html>

matrix并不明白其意思

CSS3属性(二)的更多相关文章

  1. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  3. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  4. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  5. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  6. IE6-8支持css3属性

    方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...

  7. css3属性中background-clip与background-origin的用法释疑

    困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种 ...

  8. 详解CSS3属性前缀（转）

    原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...

  9. 小tip:巧用CSS3属性作为CSS hack——张鑫旭

    一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...

随机推荐

  1. 为应用程序池 'DefaultAppPool' 提供服务的进程无法响应Ping

    打开Windows 2008 的事件查看器,应用警告提示: 为应用程序池 'DefaultAppPool' 提供服务的进程无法响应 Ping.进程 ID 是 '2144'. 注意: 需要重新注册一vb ...

  2. oracle/sqlserver 递归

    1.Oracle递归查询 2.SqlServer递归查询 with cte as ( select t.id,t.name,t.parentId from dbo.Department t where ...

  3. Apk去签名校验详解

    某些apk为了防止重打包,使用了签名校验.所以在破解的时候我们需要破解签名校验.在定位签名校验位置时常用的关键词有sign,signature,checkSign,signCheck,getPacka ...

  4. _set_invalid_parameter_handler异常处理函数

    VS2005之后的版本,微软增加了一些新的异常机制,新机制在出现错误时默认不通知应用程序,这时程序就崩溃了.所以这种情况下,必须调用_set_invalid_parameter_handler._se ...

  5. Windows Phone后台音乐播放本地代理实现讨论

    前一篇文章讨论的wp平台音乐播放的一些遇到的问题,经过苦思冥想和多方参考安卓实现:发现我们可以考虑一种本地代理的思想来完成我们的边听边存,并且流畅拖动进度条.希望大家一起讨论.可以下载我的代码一同研究 ...

  6. Entity Framework增删改之通用精简方法

    用EF用了好长一段时间了,从EF4.0的版本开始接触,感觉这个ORM不能说性能是最好的,但是我个人感觉功能实现以及和mvc的结合还是一个不错的企业级网站的解决方案,在此写个简易的通用扩展方法来方便大家 ...

  7. [Python] Magic editor in Pycharm

    From: http://blog.csdn.net/u013088062/article/details/50249751 From:http://blog.csdn.net/u013088062/ ...

  8. 更加优雅地配置Spring Securiy（使用Java配置和注解）

    Spring Security 借助一系列Servlet Filter 来提供安全性功能,但是借助Spring的小技巧,我们只需要配置一个Filer就可以了,DelegatingFilterProxy ...

  9. [阅读]个人阅读作业week7

    People-oriented in Agile People-oriented in Agile One Leader Prepare Good ideas from users People-or ...

  10. jquery选择器（原创）<二>

    jquery选择器,选择接着学: 前面学习了基本选择器中的CSS选择器,现在学层级选择器: 1.子元素选择器 子元素选择器,用于在给定的父元素下,查找这个父元素下面的所有的子元素,语法格式,如下: $ ...