<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. MFC下调用控制台和控制台下MFC库的支持

    1.MFC下调用控制台 在CWinApp的InitInstance中对话框的DoModal之前加入 AllocConsole(); // 开辟控制台 SetConsoleTitle(_T(" ...

  2. csv大文件分割以及添加表头

    注:这里说的大文件也不是太大,只有60多M而已(70多万条数据),相对比较大而已. 为了减轻编辑的工作,某种情况下网站上可能用会到csv格式的文件进行数据导入,但一般网站除了有上传文件大小限制以外,还 ...

  3. js 获取时间比较全，留备用（zhuan）

    var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear();    //获取完整的年份(4位 ...

  4. facebook-开发

    https://developers.facebook.com/docs/ios/getting-started?locale=zh_CN#prerequisites

  5. left join on

    问题: select * from A left join  f on e.cust=f.account_id where f.status='0' 与 select * from A left jo ...

  6. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  7. iOS-nil，Nil，NULL的区别

    一.简述 1.nil用来给对象赋值(Objective-C中的任何对象都属于id类型) 2.NULL则给任何指针赋值,NULL和nil不能互换 3.nil用于类指针赋值(在Objective-C中类是 ...

  8. 资料下载：敏捷个人的成长思考.pptx（第1次线下活动2011.04）

    本文挪至 http://www.zhoujingen.cn/blog/629.html PDF下载地址:http://down.51cto.com/data/207112 推荐:你可能需要的在线电子书 ...

  9. UWP开发入门（十一）——Attached Property的简单应用

    UWP中的Attached Property即附加属性,在实际开发中是很常见的,比如Grid.Row: <Grid Background="{ThemeResource Applica ...

  10. Week4 结对编程

    1.照片 1.1  结对编程参与者:李文涛.黎柏文 1.2  展示照片 2.结对编程的优点&缺点 2.1 优点 2.1.1.两人分工合作,减少了工作量 2.1.2.结对编程的伙伴往往能提供不同 ...