2D转换模块：注意点：1.可以类似于过渡模块一样简写，但是这里不是用逗号隔开而是用空格
                        2.2D的转换模块会修改元素的坐标系，所以旋转之后的平移就不是水平平移
    格式：旋转：transform: rotate(30deg)旋转角度
          平移：transform: translate(50px,100px);平移的坐标系
          缩放：transform: scale(2,4);缩放的倍数
          翻转：transform: skew(30deg,20deg);沿x轴y轴旋转的角度
          矩阵：transform:matrix(0.866,0.5,-0.5,0.866,0,0);使用六个值的矩阵。达到以上所有功能
          综合：transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg);用空格隔开
          形变中心点：transform-origin：50% 50%  可以用百分比，像素，特殊关键字，默认旋转是通过自己的中心点做参考，可以通过修改形变中心点来改变旋转
          旋转轴向：transform：rotateX(45deg);transform：rotateY(45deg);transform：rotateZ(45deg);一般默认旋转是垂直桌面的Z轴旋转的
          透视属性：perspective：500px  近大远小（一般结合旋转轴向来看，更加直观）值是距离物体的多远
          注意点：一定要把透视属性设置到你要观察的元素的父元素（上级就行，设置给它爷爷也行）上面！！！！！
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>2D转换</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        ul{

            list-style: none;

            width: 800px;

            height: 800px;

            background-color: #5bc0de;

            margin: 0 auto;

        }

        li{

            width: 60px;

            height: 50px;

            background-color: yellow;

            margin: 0 auto;

            margin-bottom: 100px;

            text-align: center;

            line-height: 50px;

        }

        .box2{

            transform: rotate(30deg);

        }

        .box3{

            transform: translate(50px,10px);

        }

        .box4{

            transform: scale(2,4);

        }

        .box5{

            transform: skew(30deg,30deg);

        }

        .box6{

            transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg);

        }

    </style>

</head>

<body>

<ul>

    <li class="box1">正常</li>

    <li class="box2">旋转</li>

    <li class="box3">平移</li>

    <li class="box4">缩放</li>

    <li class="box5">翻转</li>

    <li class="box6">综合</li>

</ul>

</body>

</html>
1.2D和3D的区别：2D就是没有厚度只有宽高，3D就是除了宽高还加了厚度
默认情况下所有的元素都是2D元素
2.如何呈现3D：类似于透视，给其父元素添加transform-style：preserve-3d就行
 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>3D转换</title>

 6     <style>

 7         *{

 8             padding: 0;

 9             margin: 0;

10         }

11         .father{

12             background-color:skyblue;

13             width: 200px;

14             height: 200px;

15             margin: 100px auto;

16             perspective: 500px;

17             transform: rotateY(0deg);

18             transform-style: preserve-3d;

19         }

20         .son{

21             background-color: red;

22             width: 100px;

23             height: 100px;

24             margin: 20px auto;

25             transform: rotateY(45deg);

26         }

27     </style>

28 </head>

29 <body>

30 <div class="father">

31     <div class="son"></div>

32 </div>

33 </body>

34 </html>

CSS动画之转换模块的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  3. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  4. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  5. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  6. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  7. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  8. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. 【FLASK】使用ORM以及类似于Django更新新增字段

    #!/usr/bin/env python # -*- coding:utf-8 -*- from sqlalchemy.ext.declarative import declarative_base ...

  2. Go 安装介绍

    Go介绍 Go语言被誉为21世纪的C语言,由Google公司开发,天生对高并发有着优秀的支持.并且语法极度简洁,关键字仅有25个. 所以使用Go语言时你不用担心自己写的和大神写的有着天差地别,Go语言 ...

  3. Ribbon源码分析（一）-- RestTemplate 以及自定义负载均衡算法

    如果只是想看ribbon的自定义负载均衡配置,请查看: https://www.cnblogs.com/yangxiaohui227/p/13186004.html 注意: 1.RestTemplat ...

  4. 092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 02 static关键字（中）

    092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  5. java转python代码

    今天发现一个好玩的工具:可以直接将java转成python 1. 安装工具(windows 环境下面) 先下载antlr: http://www.antlr3.org/download/antlr-3 ...

  6. 使用Appium进行iOS的真机自动化测试

    windows不支持appium连接ios,只适用于mac 使用Appium进行iOS的真机自动化测试 安装类库 Homebrew 如果没有安装过Homebrew,先安装[ homebrew ] np ...

  7. 一、Mysql(1)

    数据库简介 人类在进化的过程中,创造了数字.文字.符号等来进行数据的记录,但是承受着认知能力和创造能力的提升,数据量越来越大,对于数据的记录和准确查找,成为了一个重大难题 计算机诞生后,数据开始在计算 ...

  8. RHSA-2017:2299-中危: NetworkManager 和 libnl3 安全和BUG修复更新（本地提权、代码执行）

    [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...

  9. CDH5部署三部曲之一：准备工作

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. JAVA基础 随机点名器案例

    1.1      案例介绍 随机点名器,即在全班同学中随机的找出一名同学,打印这名同学的个人信息. 此案例在我们昨天课程学习中,已经介绍,现在我们要做的是对原有的案例进行升级,使用新的技术来实现. 我 ...