CSS transform，过渡，动画 组织

3D 变换，背面可见性属性允许您看到元素的背面。

.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" >
    <img class="back-face" >
</div>

注意

1. 范围框 ：计算范围框时 不会计算轮廓和边距♿❙ 可堆叠上下文 ：变形小或大，占用的空间元素保持与转换前相同。它适用于所有变形函数。
2. 表示一个或多个变形函数： 空间分隔。示例：transform：rotate(30deg) skewX(-25deg) scaleY(2);
3. 变换顺序：从第一个最左边开始♺右右：当有多个变形函数时,每个 必须设置正确 以确保它们全部正确。 如果一项功能无效，则整个值都无效。
4. 变换重叠 ：变换 通常不重叠 。如果改变元素的形状，然后想要添加变形，则必须在原始变形的基础上进行修改。
5. 变换尚不能 应用于原始行框 。原始行内框是指大括号、超链接等行内框。这些元素可以与块级父元素一起变换，但不能直接旋转。除非它们的显示模式已经改为display:block、display:inline-block等。
6. 有3D效果必须配合**透视**❓❓:❓ ❙❝持续时间计时功能延迟

   Transition~属性，触发功能，瞬态。

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:none|all|_property_

指定定义过渡效果的 CSS 属性的名称。

支持转场动画功能

transition-duration:_time_

指定执行转场效果需要多少秒或毫秒。

transition-timing-function

定义速度效果的速度曲线。

transition-delay

确定过渡效果何时开始。

请注意，

1. 需要触发事件，因此在加载网页时无法自动发生。
2. 是一次性事件，除非一遍又一遍地开始，否则无法重复。
3. 只能指定开始状态和结束状态，不能指定中间点。换句话说，该状态 只有两个状态。
4. 一条转换规则只能指定对一个属性的更改，不能包含多个属性。动画

   动画 ~ 关键帧，互易

     <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	指定要绑定到选择器的关键帧的名称。 。
   animation-duration	指定动画完成所需的时间，以秒或毫秒为单位。
   动画计时功能	定义动画的速度曲线。
   animation-delay	指定动画开始之前的延迟。
   animation-itration-count	指定动画应重复的次数。
   动画方向	确定动画是否反向交替播放。

   animation-name:_keyframe__|none;

   值	描述
   keyframe-name	指定绑定关键帧的名称。
   none	设置无动画效果（可用于跳过级联动画）。

   animation-duration:time

   值	描述
   时间	定义完成动画所需的时间。默认值为0，表示没有动画增强。

   animation-timing-function:_value_

   animation-timing-function 使用称为三次贝塞尔函数的数学函数来生成速度曲线。您可以在此函数中使用自己的值或预定义的值：

   值	描述
   线性	动画速度从开始到结束都是相同的。
   简单	默认。动画以慢速开始，然后加速并减慢，最后结束。
   easy	动画以慢速开始。
   ease-out	动画以慢速结束。
   轻松进出	动画以慢速开始和结束。
   cubic-bezier(_n_,_n_,_n_,_n_)	其在三次贝塞尔函数中的自身值。可能的值为 0 到 1 之间的数值。 ?指定等待动画开始的时间（以秒或毫秒为单位）。默认值为 0。

   animation-iteration-count: _n_|infinite;

   值	描述
   n	A 的数值应重复。
   无限	要求动画应无限重复。

   动画方向：正常|替代；

   值	描述
   正常	默认值。动画应该可以正常播放。
   选项	动画反向交替播放。

   参考

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

   作者群：搞笑的人