前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

  有段时间我是没理清 transform、translate、transition 和 animation之间的关系的,现在整理一下:

  • translate:平移;是 transform 的一个属性;
  • transform:变形;是一个静态属性,可以改变元素的形状或位置,做出 2d 或 3d 效果;
  • transition:过渡,转变;使 css 属性值在一段时间内平滑的变化,需要有触发条件(如 hover 等),是 animation 的简化版;
  • animation:动画;可以设置多帧效果,然后把它们组合变换,按动画效果展示出来;

    

  • transform,可设置 translate(位移)  rotate(旋转)  scale(缩放)  skew(倾斜);接受多值,用空格分开,并按照从前往后的顺序执行
  • transform-origin,可更改转换元素的基准点(默认值,元素中心,50% 50% 0);
  • transform-style,可设置 flat(默认值,2d展示)还是 preserve-3d(3d展示);此属性必须在 transform 之后使用;
  • perspective,设置元素距离视图的距离,默认为0;
  • perspective-origin,设置视点(默认值,元素中心,50% 50%),必须和 perspective 结合使用;
  • backface-visibility,设置元素不面向屏幕时是否可见;

translate

  translate(位置平移)

  • 可以为负值,向右向下是正值,向上向左是负值;
  • 可以为百分比,百分比是基于元素自身宽高的(我们可以利用这一点实现 未知宽高的元素的垂直居中);
  • 2d效果可以拆开写成 translateX(x)、translateY(y),也可以直接写成translate(x,y),缩写中如果只写了一个值,默认是x;
  • 3d效果还有 translateZ(z),缩写 translate3d(x,y,z),3d效果中缩写的话,就必须得写3个值,少一个都不行,没有的值可以设为0;

rotate

  rotate(旋转)

  • 可以设负值;正值是顺时针旋转,负值是逆时针旋转;
  • 可以写成 rotateX(deg)、rotateY(deg)、rotateZ(deg);(角度的单位,负30度就是-30deg)

scale

  scale(缩放)

  • 可以是整数,也可以是小数,也可以设置负值;
  • 可以写成 scaleX(x)、scaleY(y)、scaleZ(z),也可以缩写成 scale(x,y) 或者 scale3d(x,y,z);
  • 当某值设为0时,就看不见元素了,但是空间还在,和 visibility:hidden 效果一样;
  • 当设置负值的时候,会发生翻转的效果
  • 缩放看起来虽然大小变化了,但占据的空间不变,不会影响布局;
      <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    } .wrapper {
    width: 300px;
    margin: 100px 0 0 100px;
    border: 10px solid red;
    } .test {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: #0ff;
    transform: scale(.5, -1);
    border: 1px solid #f60;
    } .test img {
    max-width: 100%;
    }
    </style>
    <div class="wrapper">
    <span class="test"><img src="data:images/1.jpg" /></span>
    <span>scale可以设置小数,也可以设置负值;虽然大小看起来变化了,但占据的空间不变,不会影响布局</span>
    </div>

skew

  • 可以写成 skewX(deg)、skewY(deg),也可以缩写成 skew(x,y),缩写如果只写了一个值,那就默认仅仅只是 x 轴;
  • 目前没有 Z 轴的倾斜;
  • 围绕 X 轴倾斜,会保持高度不变,拉长元素,产生变形;
  • 围绕 Y 轴倾斜,会保持宽度不变
  • 可以写负值,(下图为X轴的正值和负值);

  

  

  <style type="text/css">
* {
padding: 0;
margin: 0;
} .wrapper {
width: 300px;
height: 300px;
position: relative;
margin: 100px 0 0 100px;
border: 1px solid red;
background: #0ff;
} .test {
width: 150px;
height: 60px;
position: absolute;
left: 30%;
top: 30%;
background: #f60;
transform: skewX(-45deg);
}
</style>
<div class="wrapper">
<div class="test"></div>
</div>

transform-origin

  设置转换元素的基准点,然后元素的变形就围绕这个点展开;

  • 默认值是元素中心(50% 50% 0);
  • X 和 Y 轴可以设置单位值、百分比、left | center | right | top | bottom;Z轴只能设置具体单位值;
  • 可以设置1-3个值,用空格隔开,如果只写了1个,那么仅仅只是X轴;2个的话,就是 X 轴和 Y 轴;

transform-style

  设定元素及其子元素怎样在三维空间中展示;

  • 默认值,flat,2d平面;设置为 preserve-3d,就是3d空间;
  • 当元素设置 overflow:hidden 的时候,preserve-3d 失效;
  • 一般我们在元素的父元素身上使用,因为此属性可以继承;

prespective

  设置元素距离视图的距离,

   

  • 默认为 none(0);可设置具体值,以像素为单位,不能为负值;
  • 我们看远处的物体,会发现看不清,当我们走近一点的时候,就看得清除了,此属性可以理解为我们站的位置离物体的距离;
  • 我们一般在变形元素的父元素身上使用,因为浏览器会为其子元素产生透视效果,不会为它本身产生透视效果;设置了此属性的元素我们也叫透视元素;

prespective-origin

    设置视点;

  

  • 默认值(50% 50%),可设置单位值、百分比、left | center | right | top | center | bottom ;
  • 可以设置1-2个值,设置1个值时,另一个默认为 center;
  • 可以理解为我们看妹子的时候看的哪个位置,脸?腿?胸?
  • 此属性必须定义在设置了 prespective 属性的元素身上;

backface-visibility

  设置当元素不面向屏幕时,是否可见;如果旋转元素不希望看见其背面时,此属性很好用;

  • 默认 visible,可设置 hidden;

  

  正方体后面要绕 Y 轴旋转180度,我一开始没想起来,调了很久;

  <style type="text/css">
* {
padding: 0;
margin: 0;
} li {
list-style: none;
} /*定义舞台容器*/
.panel {
width: 800px;
margin: 100px auto;
perspective: 1300px;
/*定义视距*/ } .panel:hover ul {
transform: rotateY(60deg)rotateZ(45deg);
} /*立方体*/
ul {
width: 100px;
height: 100px;
margin: auto;
position: relative;
transform-style: preserve-3d;
/*定义该立方体是个3D元素*/
transform: rotateX(-30deg) rotateY(20deg);
transition: all 2s;
cursor: pointer;
} /*立方体六个面*/
li {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0; font: 30px/100px "微软雅黑";
text-align: center;
color: #fff;
backface-visibility: hidden;
} .front {
transform: translateZ(50px);
background: rgba(0, 255, 0, .6);
} .back {
transform: translateZ(-50px) rotateY(180deg);
/*后面要旋转绕Y轴180度,我一开始没想起来,调了很久*/
background: rgba(255, 0, 255, .6);
} .left {
transform: translateX(-50px) rotateY(-90deg);
background: rgba(0, 0, 255, .6);
} .right {
transform: translateX(50px) rotateY(90deg);
background: rgba(255, 255, 0, .6);
} .top {
transform: translateY(-50px) rotateX(90deg);
background: rgba(255, 0, 0, .6);
} .bottom {
transform: translateY(50px) rotateX(-90deg);
background: rgba(0, 255, 255, .6);
}
</style>
<div class="panel">
<ul>
<li class="top">上</li>
<li class="bottom">下</li>
<li class="left">左</li>
<li class="right">右</li>
<li class="front">前</li>
<li class="back">后</li>
</ul>
</div>

  大神还整理了 transform 的副作用请点击

  • 设置了 transform:非none; 的元素,可以覆盖标准流元素和低级别的定位元素;
  • webkit 内核浏览器下,如果父元素设置了 transform:非none; 那么子元素的fixed效果会变成 absolute 效果;
  • 更改定位父级 position:absolute; 定位的是祖先元素中第一个 position:非static 的元素;但是如果祖先元素中有设置了 transform:非none;也可以被定位为父级

transform做2d和3d变形(css动画一)的更多相关文章

  1. Mathcad 是一种工程计算软件,主要运算功能:代数运算、线性代数、微积分、符号计算、2D和3D图表、动画、函数、程序编写、逻辑运算、变量与单位的定义和计算等。

    Mathcad软件包Mathcad是由MathSoft公司(2006 年4 月被美国PTC收购)推出的一种交互式数值计算系统. Mathcad 是一种工程计算软件,作为工程计算的全球标准,与专有的计算 ...

  2. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  3. transform的2D和3D变换

    transform取值 none:默认值,即是无转换 matrix(,,,,,): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...

  4. CSS3—— 2D转换 3D转换 过渡 动画

    2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————>  ————>   移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并  3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...

  5. 关于transform的2D

    在transform的学习中,自己总结了一点经验. 我们知道transform有2D和3D的两大类变换,这里分享下关于2D的属性简单示例: 一.2D变换:  (x为水平,y为垂直) 1.skew(斜拉 ...

  6. css 动画(一)transform 变形

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清 transform.translate.transition 和 animation之 ...

  7. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

  8. transition和animation做动画(css动画二)

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

  9. css—动画(transform, transition, animation)

    transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...

随机推荐

  1. 【Bootstrap】 bootstrap-table表格组件

    [Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...

  2. 【Python】 零碎知识积累 I

    大概也是出于初高中时学化学,积累各种反应和物质的习惯,还有大学学各种外语时一看见不认识的词就马上记下来的习惯,形成了一种能记一点是一点的零碎知识记录的癖好.这篇文章就是专门拿来记录这些零碎知识的,没事 ...

  3. C++关联容器知识总结

    C++的容器类型可以分为顺序容器和关联容器两大类.顺序容器的知识可以参看我上篇的随笔<C++顺序容器知识总结>.关联容器支持通过键值来高效的查找和读取元素,这是它和顺序容器最大的区别.两种 ...

  4. Struct_2路径问题

    今天在自学那个Struct2的知识点的时候,发现那个相对路径和绝对路径有点遗忘.特地去看了视频还有在百度上查了一些资料.我觉得这个路径问题对于我这个初学者来说还是有点容易遗忘的.所以,今天就添加这个新 ...

  5. Ditto在教学上的应用

    Ditto在教学上的应用 我喜欢iOS和macOS生态的一个原因是,你在iphone上看到一段好文字,复制一下,到macbook中粘贴一下就可以了,这体验太爽了. 大家可能相信大家都听过这样一则笑话: ...

  6. PTA博客制作的模版

    C高级第 次PTA作业( ) 题目 - 此处填写题目名称 1.设计思路 (1)算法 (2)流程图 2.实验代码 此处填写代码 3.本题调试过程碰到问题及解决办法 错误信息: 错误原因: 改正方法: 提 ...

  7. appcompat v21: 让 Android 5.0 前的设备支持 Material Design

    1. 十大Material Design开源项目 2. appcompat v21: 让 Android 5.0 前的设备支持 Material Design 主题 AppCompat已经支持最新的调 ...

  8. python 字符串和字典

    一.字符串操作 name = "my name is \t {name} and i am {year} years old" 1.首字母大写 print(name.capital ...

  9. webpack你值得拥有-从四个核心配置谈起

    很久没有发文章了,但是强调一点,大-熊同学最近可没闲着.学习算法,复习计算机网络,也顺便学习了一下webpack,看了看操作系统(没办法,都没学,要是不学连实习笔试都过不了,伤心--).本来比较纠结是 ...

  10. MyEclipse的多模块Maven web(ssm框架整合)

    Maven的多模块可以让项目结构更明确,提高功能的内聚,降低项目的耦合度,真正的体现出分层这一概念. 我们在操作中,要明白为什么这样做,要了解到更深的层次,这样,我们就不限于个别软件了. 话不多说,直 ...