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. web框架推导

    django 引言 所有的web应用本质上就是一个socket服务端,而用户的浏览器. 软件开发架构 cs架构 bs架构 本质上,bs架构也是cs架构 http协议 网络协议 http协议 数据传输是 ...

  2. 工作流引擎Activiti与SpringBoot2整合--开源软件诞生17

    开源ERP技术整合系列--第17篇 用日志记录"开源软件"的诞生 [点亮星标]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/redragon/r ...

  3. minimist

    下载 minimistminimist 解析参数选项 这个模块是乐观主义者参数解析器的核心,没有所有的 奇特的装饰. 例子 var argv = require('minimist')(process ...

  4. Hello World背后的事情

    Hello World是不少人学习C++的第一项内容,代码看似简单,很多东西却涉及根本 #include <iostream> using namespace std; int main( ...

  5. linux c 多线程开发

    在开发多线程程序时,当创建的线程数量特别多的时候,就会遇到线程数量的瓶颈. 多线程设置 设置内核参数 kernel.threads-max kernel.threads-max 是 linux 系统允 ...

  6. Cesium.Viewer

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  7. reids等非关系数据库管理工具treesoft

    先下载treesoft 链接:https://pan.baidu.com/s/1o8UPK7lF0-WvE9afoR0sWw 提取码:3uc3 下载好之后进行解压文件 解压完成后目录结构 将webap ...

  8. java高级&资深&专家面试题-行走江湖必备-持续更新ing

    行走江湖必备一份面试题,这里给大家整理了一套.0面试官最喜欢问的问题或者出场率较高的面试题,助校招或者社招路上的你一臂之力! 首先我们需要明白一个事实,招聘的一个很关键的因素是在给自己找未来的同事,同 ...

  9. docker 升级后或者重装后，启动容器提示：Error response from daemon: Unknown runtime specified docker-runc

    之前安装的版本是docker 1.3,并运行了容器jenkins 现在把docker升级版本为docker-ce 19.03 再使用docker ps发现之前的jenkins容器已经退出了 启动容器: ...

  10. 自定义chrome新标签页

    [跳转GitHub] chromeNewTab 自定义chrome新标签页.由于不想发布到chrome应用商店,因此搜了一下不用开发者模式就能用的方法. 使用说明 下载chrome的一个[window ...