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. JFile的导入xlsx与xls

    首先需要有JAVA的一些jar包 下载地址:http://download.csdn.net/detail/qq_35980546/9892511 你要先配置好路由,还有能拿到绝对路径才行 下面直接给 ...

  2. JavaWeb 后端 <十一> 之 DBUtils 框架 （基本使用 结果集 事务处理 对表读取）

    一.数据库操作框架 1.ORM:Object Relation Mapping Hibernate:非常流行 JPA:Java Persistent API.ORM标准 MyBatis:2010年开始 ...

  3. css中的层叠性及权重的比较

    假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...

  4. memcache缓存安装配置

    memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.目前用memcache解决互联网上的大用户读取是非常流行的一种用法. 下载安装 前提要先安装libev ...

  5. UDP和多线程服务器

    UDP: UDP是数据报文传输协议,这个传输协议比较野蛮,发送端不需要理会接收端是否存在,直接就发送数据,不会像TCP协议一样建立连接.如果接收端不存在的话,发送的数据就会丢失,UDP协议不会去理会数 ...

  6. tensorflow l2_normalize函数

    1.l2_normalize函数 tf.nn.l2_normalize(x, dim, epsilon=1e-12, name=None) 解释:这个函数的作用是利用 L2 范数对指定维度 dim 进 ...

  7. Multimodal —— 看图说话（Image Caption）任务的论文笔记（三）引入视觉哨兵的自适应attention机制

    在此前的两篇博客中所介绍的两个论文,分别介绍了encoder-decoder框架以及引入attention之后在Image Caption任务上的应用. 这篇博客所介绍的文章所考虑的是生成captio ...

  8. GetConsoleTitle 函数--获取控制台窗口标题

    GetConsoleTitle函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms683174(v=vs.85).aspx ...

  9. （转）Spring boot——logback.xml 配置详解（二）

    文章转载自:http://aub.iteye.com/blog/1101260,在此对作者的辛苦表示感谢! 1 根节点<configuration>包含的属性 scan: 当此属性设置为t ...

  10. zookeeper单机模式安装

    zookeeper单机模式安装 更多文章:http://blogxinxiucan.sh1.newtouch.com/2017/07/26/zookeeper单机模式安装/ 下载zookeeper u ...