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. VB6之CRC32

    翻译篇:http://www.cnblogs.com/duzouzhe/archive/2009/08/05/1539543.html Private Declare Function GetTick ...

  2. Asp.Net Core 中无法使用 ConfigurationManager.AppSettings

    刚刚接触.net core ,准备把之前的一些技术常用工具先移植到.net Standard上面来, 方便以后使用,结果用到ConfigurationManager 的 AppSettings 就出现 ...

  3. mac重开电脑后显示重装提示解决办法

    情况描述: mac昨天电脑关闭后 第二天打开电脑就显示语言选择安装语言 解决办法: 1  出现语言安装提示界面  我们选择简体中文 2  出现苹果密码登陆    我们选择下面的按钮点击退出  这样就可 ...

  4. Eclipse中配置约束(DTD,XSD)

    在Eclipse中本地配置schema约束(xsd): 1.比如配置spring的applicationContext.xml中的约束条件: 复制applicationContext.xml中如图: ...

  5. RobotFramwork安装报错name 'execfile' is not defined

    安装RobotFramwork的时候,提示了这个?是什么原因呢? 本机装的是python3.6: 经官方回复得知识因为python的版本不兼容该模块的安装. 官方认定版本是2.7,所以这里推荐大家玩p ...

  6. log4j（七）——log4j.xml简单配置样例说明

    一:测试环境与log4j(一)--为什么要使用log4j?一样,这里不再重述 二:老规矩,先来个栗子,然后再聊聊感受 (1)这里栗子有一点特别呀!给出了包名唉!想必有用,是的,配置文件中要特别说明一下 ...

  7. VMware workstation批量创建虚拟机和自动化安装操作系统（一）

    一. 简述 作为从事IT行业运维工作的Linuxer,大多情况下需要在测试环境中部署业务系统并进行测试,在没有足够的计算存储网络条件下,使用虚拟机进行虚拟集群的创建和使用,是一种不错的学习和实践方式. ...

  8. Intellij IDEA 2017 详细图文教程之概述

    天天编码 , 版权所有丨本文标题:Intellij IDEA 2017 详细图文教程之概述 转载请保留页面地址:http://www.tiantianbianma.com/intellij-idea- ...

  9. OPNET中FIN，FOUT以及FRET的作用 分类： opnet 2014-05-12 16:07 144人阅读 评论(0) 收藏

    为了使一个用户定义的函数被执行,该函数必须与一个特殊的堆栈跟踪代码相连.堆栈跟踪技术靠在函数的入口点和出口点插入预处理器宏指令完成(一个函数只有一个入口点,但可以有多个出口点(由C语言的return声 ...

  10. 一次浴火重生的MySQL优化(EXPLAIN命令详解)

    一直对SQL优化的技能心存无限的向往,之前面试的时候有很多面试官都会来一句,你会优化吗?我说我不太会,这时可能很多人就会有点儿说法了,比如会说不要使用通配符*去检索表.给常常使用的列建立索引.还有创建 ...