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. Java自学手记——接口

    抽象类 1.当类和对象被abstract修饰符修饰的时候,就变成抽象类或者抽象方法.抽象方法一定要在抽象类中,抽象类不能被创建对象,如果需要使用抽象类中的抽象方法,需要由子类重写抽象类中的方法,然后创 ...

  2. JavaService实现Windows服务

    下载JavaService.exe文件 下载地址:http://pan.baidu.com/s/1boWk1uJ(支持Windows 7 64位) 创建server文件目录 在D盘新建一个文件夹如:D ...

  3. 用java调用oracle存储过程总结

    以前一直没有动存储过程是用来干嘛的,后来请教朋友才换为自己的理解方式,用自己通俗的语言来说,就是把sql语句换为一个过程,也可以说是一个方法,每次直接给参数调用就好,使用存储过程查询速度快,系统只编译 ...

  4. 关于ubuntu服务器上部署postgresql 以及安装pgadmin4管理工具(web版)

    进入目录:cd pgadmin4   source bin/activate     cd pgadmin4-1.6/ 启动pgadmin4:python web/pgAdmin4.py pgadmi ...

  5. 常用的DNS

    中国互联网络中心(推荐,安全又快速):1.2.4.8.210.2.4.8.101.226.4.6(电信及移动).123.125.81.6(联通)阿里DNS:223.5.5.5.223.6.6.6goo ...

  6. ThinkPHP 实现验证码渲染、校验、点击刷新

    一.在控制器中写方法,生成验证码,代码如下: /** * 验证码生成 * expire 验证码的有效期(秒) * useImgBg 是否使用背景图片 默认为false * fontSize 验证码字体 ...

  7. Python爬虫从入门到放弃（十九）之 Scrapy爬取所有知乎用户信息(下)

    在上一篇文章中主要写了关于爬虫过程的分析,下面是代码的实现,完整代码在:https://github.com/pythonsite/spider items中的代码主要是我们要爬取的字段的定义 cla ...

  8. (转)java提高篇(一)-----理解java的三大特性之封装

    从大二接触java开始,到现在也差不多三个年头了.从最基础的HTML.CSS到最后的SSH自己都是一步一个脚印走出来的,其中开心过.失落过.寂寞过.虽然是半道出家但是经过自己的努力也算是完成了“学业” ...

  9. phpstudy连接SQL Server 2008数据库 以及 php使用sql server出现乱码解决方式

    开始也尝试自己配置php安装环境,找到一个详细的百度经验http://jingyan.baidu.com/article/154b46315242b328ca8f4101.html,前面有问题也一一去 ...

  10. margin用的时候常见问题

    margin1.     在同一个方向布局        同时设置左右margin的时候间距是两者之和        同时设置上下margin的时候间距是较大的那个,大者为尊2.    拖拽父级    ...