<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div>初始效果div1</div>
<br/>
<div class="div2">展示div2</div>
<br/>
<div class="div3">展示div3</div>
<br/>
<div class="div4">展示div4</div>
<br/>
<div class="div5">展示div5</div>
<br/>
<div class="div6">展示div6</div>
<br/>
<div class="div7">展示div7</div>
<br/>
<div class="div8">展示div8</div>
</body>
</html>
div{
    width:100px;
    height:100px;
    background-color: deepskyblue;
    border: double;
    margin: 30px;
}
.div2{
    /*移动*/
    transform: translate(200px,100px);/*现在chrome有效果*/
    -webkit-transform: translate(200px,100px);/*safari chrome*/
    -ms-transform: translate(200px,100px);/*IE*/
    -o-transform: translate(200px,100px);/*opera*/
    -moz-transform: translate(200px,100px);/*Firefox*/
}

.div3{
    /*旋转 */
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
    transform: rotate(200deg);
}

.div4{
    /*缩放(宽度，高度)倍数*/
    -webkit-transform: scale(1,2);
    -moz-transform: scale(1,2);
    -ms-transform: scale(1,2);
    -o-transform: scale(1,2);
    transform: scale(1,2);
}
.div5{
    /*倾斜度数下x,y轴*/
    -webkit-transform: skew(20deg,50deg);
    -moz-transform: skew(20deg,50deg);
    -ms-transform: skew(20deg,50deg);
    -o-transform: skew(20deg,50deg);
    transform: skew(20deg,50deg);
}
.div6{
    /*矩阵(利用矩阵算出偏移量)http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/*/
    -webkit-transform: matrix(1, 0, 0, 1, 200, 100);
    -moz-transform: matrix(1, 0, 0, 1, 200, 100);
    -ms-transform: matrix(1, 0, 0, 1, 200, 100);
    -o-transform: matrix(1, 0, 0, 1, 200, 100);
    transform: matrix(1, 0, 0, 1, 200, 100);
}
.div7{
    /*3d转换*/
    -webkit-transform: rotateX(120deg);
    -moz-transform: rotateX(120deg);
    -ms-transform: rotateX(120deg);
    -o-transform: rotateX(120deg);
    transform: rotateX(120deg);
}
.div8{
    /*3d转换*/
    -webkit-transform: rotateY(120deg);
    -moz-transform: rotateY(120deg);
    -ms-transform: rotateY(120deg);
    -o-transform: rotateY(120deg);
    transform: rotateY(120deg);
}

HTML学习笔记 cs2D3D展示基础 第十四节 （原创） 参考使用表的更多相关文章

  1. JavaSE 学习笔记之String字符串（十四）

    API:(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源 ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. Java学习笔记：语言基础

    Java学习笔记:语言基础 2014-1-31   最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...

  4. 卷积神经网络(CNN)学习笔记1：基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...

  5. 「学习笔记」字符串基础：Hash，KMP与Trie

    「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...

  6. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  7. Java15-java语法基础（十四）抽象类

    Java15-java语法基础(十四)抽象类 一.抽象类的作用 三个类都有"执行任务"的方法,分别在这三个类中进行定义,因此需要重复编写代码,降低了程序开发效率,且增加了程序出现错 ...

  8. 风炫安全web安全学习第三十四节课 文件包含漏洞防御

    风炫安全web安全学习第三十四节课 文件包含漏洞防御 文件包含防御 在功能设计上不要把文件包含的对应文件放到前台去操作 过滤各种../,https://, http:// 配置php.ini文件 al ...

  9. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

随机推荐

  1. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  2. Twitter的分布式系统中ID生成方法——Snowflake

    Twitter-Snowflake算法产生的背景相当简单,为了满足Twitter每秒上万条消息的请求,每条消息都必须分配一条唯一的id,这些id还需要一些大致的顺序(方便客户端排序),并且在分布式系统 ...

  3. Reliability diagrams

    Reliability diagrams (Hartmann et al. 2002) are simply graphs of the Observed frequency of an event ...

  4. django ajax练习

    这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...

  5. 退出psql时，报psql_history的错

    数据库版本:Enterprisedb 9.2(postgreSQL) 错误如下所示: postgres=# exitcould not save history to file "/opt/ ...

  6. PHP MYSQL 搜索周边坐标，并计算两个点之间的距离

    搜索附近地点,例如,坐标(39.91, 116.37)附近500米内的人,首先算出“给定坐标附近500米”这个范围的坐标范围. 虽然它是个圆,但我们可以先求出该圆的外接正方形,然后拿正方形的经纬度范围 ...

  7. 详解m4文件

    最近在分析speex代码,发现编译过程中需要的一个speex.m4文件不知道是何方神圣,怀着对未知知识的渴望,跑到 某哥和某基问了一下,算是认识了,为了方便以后经常见面,这里就做个记录吧. M4实际上 ...

  8. 【转】Python正则表达式指南

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  9. Sublime 3 打造成 Python/Django IDE开发利器

    Sublime Text 是一款非常强大的文本编辑器, 下面我们介绍如何将 Sublime Text 3 打造成一款 Python/Django 开发利器:   1. 安装 Sublime Text ...

  10. webpack 的使用2

    实际项目中的配置 要加__dirname 不然会报错 注意path  /dist 前不要加点 结果 将两个文件打包在一起 结果 传入对象 并且单独打包 name为key 加上本次打包的hash has ...