<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. 活学活用，webapi HTTPBasicAuthorize搭建小型云应用的实践

    HTTP使用BASIC认证,WebAPI使用[HTTPBasicAuthorize]标记控制器就是使用了BASIC认证. BASIC认证的缺点HTTP基本认证的目标是提供简单的用户验证功能,其认证过程 ...

  2. RESTful 良好的API设计风格

    1.使用名词而不是动词 Resource资源 GET读 POST创建 PUT修改 DELETE /cars 返回 cars集合 创建新的资源 批量更新cars 删除所有cars /cars/711 返 ...

  3. jQuery浏览器差异

    //firefox Interface.send(data,function(msg){ $(msg).find("CARINFO").each(function(i){ var ...

  4. 读书笔记_Effective_C++_条款四十四：将与参数无关的代码抽离template

    标题上说“将与参数无关的代码抽离template”,这里的参数既可以指类型,也可以是非类型,我们先来看看非类型的情况. 假定我们要为矩阵写一个类,这个矩阵的行列元素个数相等,是一个方阵,因而我们可以对 ...

  5. C++的ORM工具比较

        用过Java的都知道SSH框架,特别对于数据库开发,Java领域有无数的ORM框架,供数据持久层调用,如Hibernate,iBatis(现在改名叫MyBatis),TopLink,JDO,J ...

  6. 从window.console&&console.log(123)浅谈JS的且运算逻辑(&&)

    一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三 ...

  7. [C] static和extern的作用

    static: 当用于函数定义或者代码块之外的变量声明时,static关键字用于修改标识符的链接属性,从external改为internal. 当用于代码块内部的变量声明时,static关键字用于修改 ...

  8. Mysql学习笔记（六）增删改查

    PS:数据库最基本的操作就是增删改查了... 学习内容: 数据库的增删改查 1.增...其实就是向数据库中插入数据.. 插入语句 insert into table_name values(" ...

  9. 转载：全球首个微信小程序（应用号）开发教程！通宵吐血赶稿，每日更新！

    微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以 ...

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

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