<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. Cloning EBS from Linux 5 to Linux 6 Fails: "Error While Loading Shared Libraries: libclntsh.so.10.1

    SYMPTOMS    During clone Oracle Applications R12 from Linux 5 to Linux 6 the following error occurs ...

  2. BZOJ 1251 序列终结者（Splay）

    题目大意 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术 ...

  3. mmo设计

    基于多人格斗系统设计. 总体 1.放技能/使用道具,行走,公告,聊天 共性: A.服务端代理推送 B.管道内推送 2.玩家信息(统一玩家信息查看,去除每个模块自己实现) 3.怪物掉落(统一掉落控制.领 ...

  4. LiveWriter Test

    From LiveWriter.

  5. ExtJs Column 显示文字内容过长 使用Tootip显示全部内容

    { text: 'Column Header Blah', dataIndex: 'blah', renderer: function(value, metaData, record, rowIdx, ...

  6. Alwayson+Replication

    本文将介绍如何实现Alwayson + Replication ,通过AlwaysOn实现Publication database的高可用性,使Publication database在failove ...

  7. 关于MySQL的Admin Ping Command

    前言: 最近在线上诊断QPS飙升的过程中深入进行了下Admin Ping Command的测试.此外,再一些国外文章中最近也读到了一些相关知识,所以写成一篇博文做一下总结. 1. 关于Admin Pi ...

  8. LeetCode-304. Range Sum Query 2D - Immutable

    Description: Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by ...

  9. Android Logcat 封装类

    简单日志封装类: public final class CLog { public static final boolean DEBUG = true; private CLog() { } publ ...

  10. 开放产品开发（OPD）：开篇

    OPD?这是什么玩意?google一下.忘记说了,最近google被封锁的厉害,那就百度一下吧.可惜,OPD找不出是什么.你今天你找不到是正常的,因为之前还没有OPD,而现在才开始有OPD这个东东.相 ...