css3动画的2D、3D转换代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3动画</title>

    <style type="text/css">

        div{width:100px;height:100px;background: rebeccapurple;color:#fff;}

        .div1{

            /*translate:移动(x,y)*/

            transform:translate(100px,100px);

            -webkit-transform: translate(100px,100px);/*safari,chrome*/

            -ms-transform: translate(100px,100px);/*IE*/

            -o-transform:translate(100px,100px);/*opera*/

            -moz-transform: translate(100px,100px);/*firefox*/

        }

        .div2{

            /*rotate:旋转(旋转角度edg)*/

            transform:rotate(100deg);

            -webkit-transform:rotate(100deg);/*safari,chrome*/

        }

        .div3{

            /*scale:缩放(宽，高)*/

            transform:scale(1,2);

            -webkit-transform:scale(1,2);/*safari,chrome*/

        }

        .div4{

            /*skew:倾斜(围绕x轴旋转，围绕y轴旋转)*/

            transform:skew(20deg,20deg);

            -webkit-transform:skew(20deg,20deg);/*safari,chrome*/

        }

        .div5{

            /*matrix矩阵，定义 2D 转换，使用六个值的矩阵

                          定义 3D 转换，使用 16 个值的 4x4 矩阵*/

            transform:matrix(0.586,0.8,-0.8,0.866,0,0);

            -webkit-transform: matrix(0.586,0.8,-0.8,0.866,0,0);

        }

        /*3D转换*/

        .div6{

            /*rotateX:(围绕x轴旋转)*/

            /*rotateY:(围绕y轴旋转)*/

            transform:rotateX(120deg);

            -webkit-transform:rotateX(120deg);/*safari,chrome*/

        }

    </style>

</head>

<body>

<div>这个是测试1</div><br/>

<div class="div1">这个是测试2</div><br/>

<div class="div2">这个是测试2</div><br/>

<div class="div3">这个是测试2</div><br/>

<div class="div4">这个是测试2</div><br/>

<div class="div5">这个是测试2</div><br/>

<div class="div6">这个是测试2</div><br/>

</body>

</html>

css3动画2D、3D转换的更多相关文章

  1. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  2. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

  3. css3动画 2D 3D transfrom

    2D transform 例如transform: translate(1px,30px); translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当 ...

  4. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  5. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  6. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  7. CSS3动画属性：转换(transition)

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  8. CSS3 3D转换——rotateX()，rotateY()，rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  9. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

随机推荐

  1. JavaScript 第一课

    今天进入到了js的阶段,了解到了JavaScript是一个很重要的阶段,所以要好好的理清每一个知识点 JavaScript的使用:   在<head>标签里应用<script> ...

  2. threejs里面的vector3源码解析

    // File:src/math/Vector3.js /** * @author mrdoob / http://mrdoob.com/ * @author *kile / http://kile. ...

  3. 中缀表达式变后缀表达式、后缀表达式（逆波兰）求值(python版本)

    定义: 中缀表达式: 在通常的表达式中,二元运算符总是置于与之相关的两个运算对象之间,这种表示法也称为中缀表达式 后缀表达式: 又叫逆波兰表达式 ,不包含括号,运算符放在两个运算对象的后面,所有的计算 ...

  4. MongoDB数据库索引构建情况分析

    前面的话 本文将详细介绍MongoDB数据库索引构建情况分析 概述 创建索引可以加快索引相关的查询,但是会增加磁盘空间的消耗,降低写入性能.这时,就需要评判当前索引的构建情况是否合理.有4种方法可以使 ...

  5. JavaSE中线程与并行API框架学习笔记1——线程是什么？

    前言:虽然工作了三年,但是几乎没有使用到多线程之类的内容.这其实是工作与学习的矛盾.我们在公司上班,很多时候都只是在处理业务代码,很少接触底层技术. 可是你不可能一辈子都写业务代码,而且跳槽之后新单位 ...

  6. hdu_5964:平行四边形

    打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...

  7. Python面向对象编程（一）

    1.什么是面向对象 面向对象(oop)是一种抽象的方法来理解这个世界,世间万物都可以抽象成一个对象,一切事物都是由对象构成的.应用在编程中,是一种开发程序的方法,它将对象作为程序的基本单元. 2.面向 ...

  8. luogu P1494 岳麓山上打水 [iddfs]

    题目描述 今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. 信息组有一个容量为q升的大缸,由于 ...

  9. python基础（7）：字符编码

    今天我们进入字符编码的学习.字符编码是一个多理论少结论的知识点,我会总结很多的知识点.我们只需要通读当作了解即可,最后我会总结需要我们理解掌握的重点. 一.学习字符编码的计算机基础储备 1.计算机软件 ...

  10. new DefaultHttpClient过时处理建议和HTTP调用后关闭流处理

    因为工作中经常会写点接口类需求,写完HTTP的接口后,就要写测试类来调下服务端的代码.最近写新的测试调用代码时候,发现项目中new DefaultHttpClient()实例过期很久了,于是查阅了些资 ...