<!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. Perfect Pth Powers poj1730

    Perfect Pth Powers Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16383   Accepted: 37 ...

  2. MySQL之增删改查

    前言:以下是MySQL最基本的增删改查语句,很多IT工作者都必须要会的命令,也是IT行业面试最常考的知识点,由于是入门级基础命令,所有所有操作都建立在单表上,未涉及多表操作. 前提:在进行" ...

  3. 在Ubuntu终端彻底删除软件

    在Ubuntu终端彻底删除软件 1.删除软件 方法一.如果你知道要删除软件的具体名称,可以使用 sudo apt-get remove --purge 软件名称 sudo apt-get autore ...

  4. Ubuntu16.04下安装redis

    Ubuntu16.04下安装redis 保证网络畅通,选定好下载工作路径,执行以下命令下载redis-3.2.6: sudo wget http://download.redis.io/release ...

  5. 兼容低版本JS的Array.map方法

    前几天去别的公司面试遇到个这样的问题,兼容IE7下的Array.map方法,一脸蒙蔽.后面回来查了下资料发现.Array.map方法是ECMA-262 标准中新添加的方法,在低版本的JS中是木有的. ...

  6. 框架应用 : Spring开发详述

    Spring framework简介 spring framework这个框架是spring项目中的核心项目,所有框架都依赖于这个框架. 它是一个一站式的开源框架,基础技术是IoC. 按官方文档主要分 ...

  7. 深入理解C# 静态类与非静态类、静态成员的区别 [转载]

    静态类 静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.在声明一个类时使用static关键字,具有两个方面的意义:首先,它防止程序员写代码来实例 ...

  8. Windows开启telnet服务 + 连接失败处理

    一.控制面板中安装Telnet相关组件 单击"开始"菜单,单击"控制面板"     在控制面板中单击打开"程序和功能"项目   在左侧的蓝色 ...

  9. Python 基础系列一：初识python(二)基本数据类型

    上节拾遗 1.编码转换过程,utf-8转换gbk 过程 经过解码(py27): x.decode('utf-8')-->unicode-->编码x.encode('gbk') ps:py3 ...

  10. Win10系统下安装Ubuntu16.04.3教程与设置

    在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...