乐趣区

关于html:CSS-transformtransitionanimation-指南

transform

变换~ 简单的变换参数。

Transform
取值 ` none `
初始值 None
实用于 除“基元行内”框之外的所有元素
百分数 绝对范畴框计算
计算值 指定的值,不过绝对长度值会计算为相对长度
继承性
动画性 变形

坐标系

1.1 在 CSS 中,笛卡尔坐标系应用三个轴示意(如下图):

  • x 轴(横轴)
  • y 轴(纵轴)
  • z 轴(深度轴)

每个元素 都有本人的参照物,各轴都绝对本身而动。

2D 变形只须要关注 x 轴和 y 轴;3D 要加上 z 轴

x 轴的 正值在右侧 负值在左侧
y 轴的 正值纵轴向下,负值纵轴向上。
z 轴从显示器上跃出,指向你的眼前。 z 轴上的正值离你较近,负值离你较远。
1.2 旋转
如果旋转了元素,轴也随之旋转。旋转之后再变形,是绝对旋转后的轴计算
CSS 变形性能中应用的另一个坐标系—— 球坐标系

罕用

平移

  • translate()
  • translate3d()
  • translateX()
  • translateY()
  • translateZ()

缩放

  • scale()
  • scale3d()
  • scaleX()
  • scaleY()
  • scaleZ()

旋转

  • rotate()
  • rotate3d()
  • rotateX()
  • rotateY()
  • rotateZ()

rotate3d(x,y,z,deg)
应用 rotate(45deg)用 3D 旋转示意是 rotate3d(0,0,1,45deg)
应用 rotate3d()。前三个值指定 3D 空间中向量x,y 和 z 的向量,第四个值是角度值,指上图中 rotate(45deg) 在 3D 空间中,等价于 rotate3d(0,0,1,45deg)。前三个数设定向量的三个重量,这个向量在 x 轴和 y 轴上的大小为 0。在 z 轴上的大小为 1。因而,这个向量在 z 轴上,指向正方向,即指向观察者。如果看向量的原点,元素是顺时针旋转。

如果说旋转函数是 rotate3d(-0.95,0.5,1,45deg) 形容的向量。假如有个边长 200 像素的立方体,那么这个向量在 x 轴上的大小为 190 像素,指向左方。在 y 轴上的大小为 100 像素,指向下方。在 z 轴上的大小为 200 像素,指向观察者。这个向量从原点 (0,0,0) 指向(-190px,100px,200px)。如下图:

ps:rotate3d(1,1,0,45deg)rotateX(45deg) rotateY(45deg) rotateZ(0deg)不等效。

歪斜

  • skew()
  • skewX()
  • skewY()

透视点

在 3D 空间中扭转元素的状态时,基本上都要赋予元素肯定的视域。视域为元素赋予前后深度,而这深度能够依据须要设定。能够了解成 镜头的焦距
越大示意越远,越小示意越近;近大远小;
有 3D 成果须要配置合应用

  • perspective()

500px 到 1000px 之前的值产生“适中的视域”。下图展现了雷同旋转角度下不同视域值得到的后果。

必须是负数,而且不能为零。其余值都将导致 perspective()函数被疏忽。肯定要把 perspective()函数放在首位,只有也要放在以来视域的变形之前。

perspective 属性与 perspective()函数的区别

  • perspective()函数 只为指标元素定义视域,比方申明 perspective(800px) rotateY(45deg)。那么只有利用这个规定的元素能力应用设定的视域。
  • perspective 属性定义的视域深度利用到 指标元素的所有子元素上。

其余

挪动原点

  • transform-origin

目前所见的变形有个共同点,都以元素的相对核心为变形的原点。
第一个值针对横向,第二个值针对纵向,可选的第三个值是 z 轴上的长度。

变形形式

  • transform-style

设置元素的子元素是位于 3D 空间中还是立体中。

.outer {transform: perspective(750px) translateY(60px) rotateX(-20deg); 
    transform-style: perserve-3d;
}

.inner {transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

ps:transform-style设定的变形形式可能会被其余属性笼罩, 导致有效perserve-3d

  • overflow: visible
  • filter: none
  • clip: auto
  • clip-path: none
  • mask-image: none
  • mask-border-source: none
  • mix-blend-mode: normal

解决反面

在 3D 变形中,backface-visibility 属性能够看到元素的反面。

.card {
position: relative;
perspective: 800px;
transform-style: preserve-3d;
width:200px;
height:280px;
transition: all .6s;
border: 1px solid #000;
border-radius: 4px;
}

.card:hover {transform: rotateY(180deg);
}
img {
position: absolute;
width:100%;
height: 100%;
transition: all .5s;
backface-visibility: hidden;
}
/* 因为咱们将两个图像都藏在了反面,所以另一面没有任何货色。所以接下来须要再把.front-face 翻转 180 度 */
.back-face {transform: rotateY(180deg);
}

<div class="card">
    <img class="front-face" src="1.jpg">
    <img class="back-face" src="2.jpg">
</div>

留神

  1. 范畴框 :计算范畴框时, 轮廓和外边距不算在内
  2. 变形的元素有本人的 重叠上下文 :变形 前小或大,元素在页面上所占的空间与变形前放弃不变。对所有变形函数都成立
  3. 示意一个或多个变形函数:两头以空格分隔。如:transform: rotate(30deg) skewX(-25deg) scaleY(2);
  4. 变换程序 从最右边第一个开始,始终到最初一个
  5. 正确设置值 :有多个变形函数时, 每个都要设置正确 ,要确保全副无效。 如果有一个函数是有效的,整个值都将生效。
  6. 变形叠加 :变形 通常不叠加 。如果扭转了元素的状态,而后再想增加一种变形,那么要在 原变形根底上批改。
  7. 变形当初还不能 利用到基元行内框上。基元行内框指 span,超链接等行内框。这些元素能够随着块级父元素一起变形,然而不能间接旋转。除非把它们的显示方式改为 display:block,display:inline-block 等。
  8. 有 3D 成果须要配合 **perspective** 应用

    transition:property duration timing-function delay

    过渡~ 属性,触发动作,一过性。

transition-property: width, heitht, color ;
trnasition-duration: 1s, 1.5s, 2s ;
transition-timing-function: ease, linear, ease-in-out ;
transition-delay: 0s, 1s, 0s ;

transition: width 1s ease ,heitht 1.5s linear 1s, color 2s ease-in-out ;
形容
transition-property 规定设置过渡成果的 CSS 属性的名称。
transition-duration 规定实现过渡成果须要多少秒或毫秒。
transition-timing-function 规定速度成果的速度曲线。
transition-delay 定义过渡成果何时开始。

transition-property:none|all|_property_

规定设置过渡成果的 CSS 属性的名称。

形容
none 没有属性会取得过渡成果。
all 所有属性都将取得过渡成果。
property 定义利用过渡成果的 CSS 属性名称列表,列表以逗号分隔。

反对过渡动画属性

transition-duration:_time_

规定实现过渡成果须要多少秒或毫秒。

形容
time 规定实现过渡成果须要破费的工夫(以秒或毫秒计)。
默认值是 0,意味着不会有成果。

transition-timing-function

规定速度成果的速度曲线。

形容
linear 规定以雷同速度开始至完结的过渡成果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,而后变快,而后慢速完结的过渡成果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡成果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速完结的过渡成果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和完结的过渡成果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(_n_,_n_,_n_,_n_) 在 cubic-bezier 函数中定义本人的值。可能的值是 0 至 1 之间的数值。

transition-delay

定义过渡成果何时开始。

形容
time 规定在过渡成果开始之前须要期待的工夫,以秒或毫秒计。

留神

  1. 须要事件触发,所以没法在网页加载时主动产生
  2. 是一次性的,不能反复产生,除非一再触发
  3. 只能定义开始状态和完结状态,不能定义中间状态,也就是说 只有两个状态
  4. 一条 transition 规定,只能定义一个属性的变动,不能波及多个属性。

animation:_name_ duration _timing-function_ delay _iteration-count_ direction

动画~ 关键帧,往返性

  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 15px solid black;
      animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
    }

    .box:hover {animation-play-state: paused;}

    @keyframes changebox {
      10% {background: red;}
      50% {width: 80px;}
      70% {border: 15px solid yellow;}
      100% {
        width: 180px;
        height: 180px;
      }
    }
  </style>

<div class="box"></div>
形容
animation-name 规定须要绑定到选择器的 keyframe 名称。。
animation-duration 规定实现动画所破费的工夫,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的提早。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

animation-name:_keyframename_|none;

形容
keyframename 规定须要绑定到选择器的 keyframe 的名称。
none 规定无动画成果(可用于笼罩来自级联的动画)。

animation-duration:time

形容
time 规定实现动画所破费的工夫。默认值是 0,意味着没有动画成果。

animation-timing-function:_value_

animation-timing-function 应用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您可能在该函数中应用本人的值,也能够预约义的值:

形容
linear 动画从头到尾的速度是雷同的。
ease 默认。动画以低速开始,而后放慢,在完结前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速完结。
ease-in-out 动画以低速开始和完结。
cubic-bezier(_n_,_n_,_n_,_n_) 在 cubic-bezier 函数中本人的值。可能的值是从 0 到 1 的数值。

animation-delay:time

形容
time 可选。定义动画开始前期待的工夫,以秒或毫秒计。默认值是 0。

animation-iteration-count: _n_|infinite;

形容
n 定义动画播放次数的数值。
infinite 规定动画应该有限次播放。

animation-direction: normal|alternate;

形容
normal 默认值。动画应该失常播放。
alternate 动画应该轮流反向播放。

参考

  1. https://juejin.cn/post/6844903874579578887#heading-17
  2. https://jelly.jd.com/article/6006b1025b6c6a01506c8775
  3. https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
  4. https://www.w3school.com.cn/cssref/pr_transition.asp

退出移动版