<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. win7任务栏还原为xp样式

    win7的确是非常强大的操作系统,值得一提的是超级任务栏,非常新颖,不过,不是很适应win7的超级任务栏,今天,我们恢复win7超级任务栏还原xp任务栏. 方法/步骤: 1.在win7超级任务栏空白处 ...

  2. 节日EDM系列：圣诞节如何进行EDM数据营销

    消费关系升级,消费者看中的早已不是产品本身,场景消费以及消费带来的价值感体验已成为影响消费的重要因素.圣诞将至,如何才能将圣诞节EDM数据营销的效果发挥到极致? ①  节日元素创意融合,高辨识度加深品 ...

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

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

  4. Connecting my Particle Photon Internet of Things device to the Azure IoT Hub(Translation)

    原文: http://www.hanselman.com/blog/ConnectingMyParticlePhotonInternetOfThingsDeviceToTheAzureIoTHub.a ...

  5. 关于4K Block Size的Device和 Aligned IO

    背景:最近采购了一批新的服务器,底层的存储设备的默认physical sector size从原有的 512B 改为了 4K. 装完系统以后,在做数据库物理备份恢复时xtrabackup报了这么一个错 ...

  6. Node.js 入门手册：那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

  7. 读Avoiding the Disk Bottleneck in the Data Domain Deduplication File System

    最近在思考和实践怎样应用重复数据删除技术到云存储服务中.找了些论文来读,其中<Avoiding the Disk Bottleneck in the Data Domain Deduplicat ...

  8. ExtJs创建环境搭建

    开发工具Eclipse/MyEclipse. 工具下载:http://pan.baidu.com/s/1sjmiFMH(提供spket和sdk.jsb3,   extjs-4.1.1需自己下载) 1. ...

  9. ToolBar、ActionBar与Menu的纠葛（以及navigationIcon、setHomeButtonEnabled、setDisplayHomeAsUpEnabled）

    因为贴图的繁琐...所以下面是无图版...完整的在这里: 探究一下toobar和actionbar在使用menu时的吊诡情况 一.背景介绍 toolbar最近比较火,而且是出出来代替actionbar ...

  10. C#入门经典第五版之变量与表达式编码题训练

    问题:编写一个控制台应用程序,要求用户输入4个int值,并显示它们的乘积.提示:可以使用Convert.ToDouble()命令,把用户在控制台上输入的数转换为double, 以此类推,转换成int命 ...