<!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. JSP入门 导出文件

    1.图片校验码 <img  src="captcha.jpg"  /> web.xml配置 <servlet>      <servlet-name& ...

  2. cs224d 自然语言处理作业 problem set3 (一) 实现Recursive Nerual Net Work 递归神经网络

    1.Recursive Nerual Networks能够更好地体现每个词与词之间语法上的联系这里我们选取的损失函数仍然是交叉熵函数 2.整个网络的结构如下图所示: 每个参数的更新时的梯队值如何计算, ...

  3. Ubuntu 定时任务中的环境变量设置

    背景 1,定时任务命令 crontab -e 2,默认的环境变量 SHELL=/bin/sh PATH=/usr/bin:/bin PWD=/home/owl LANG=zh_CN.UTF- SHLV ...

  4. SQL Server 锁机制 悲观锁 乐观锁 实测解析

    先引入一些概念,直接Copy其他Blogs中的,我就不单独写了. 一.为什么会有锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 1.丢失更新 A,B两个用户读同一数据并进行修改,其中 ...

  5. Mysq基础

    本文是之前看博客时候的记录,忘记是哪位仁兄的了,在这只做一次转载: 常见误区 count(1)和count(primary_key) 优于 count(*) 很多人为了统计记录条数,就使用 count ...

  6. 学习总结---OSPF协议

    总结: 1.ospf协议报文不会泛洪扩散,而是逐级路由器处理后,再从所有ospf启用端口发送出去,也就是说,只能从邻居接收到ospf报文,报文的源ip是邻居的ip地址,目的ip是组播ip. 2.开启o ...

  7. JAVA继承：编译与运行的关系（编译看左边，运行看右边）

    "成员变量,静态方法看左边:非静态方法:编译看左边,运行看右边." 意思是:当父类变量引用子类对象时(Fu f = new Zi();),在这个引用变量f指向的对象中,他的成员变量 ...

  8. Java简单工厂模式以及来自lambda的优化

    前言    设计模式是软件工程中一些问题的统一解决方案的模型,它的出现是为了解决一些普遍存在的,却不能被语言特性直接解决的问题,随着软件工程的发展,设计模式也会不断的进行更新,本文介绍的是经典设计模式 ...

  9. git镜像仓库

    有时候我们会把一些仓库放到本地,当他更新的时候,可以使用简单命名更新他. 不是所有时间我们都有网,所以把远程的仓库作为镜像,可以方便我们查看 普通的git clone不能下载所有分支,想要简单的git ...

  10. 南天PR2、PR2E驱动下载，xp，win7，win8，win8.1，win10 32位64位驱动下载安装教程

    家里开淘宝店,有个针式打印机驱动.电脑各种换系统,为了装这个驱动可是废了不小的劲.不敢独享,所以现在把各种驱动以及安装教程分享出来. 注意: 打印机在开机状态下,电脑在开机状态下,不要插拔连接线!!! ...