CSS3的2D变形属性，scale：用来缩放元素（放大和缩小），translate:在屏幕上移动元素（上下左右），rotate:按照一定角度旋转元素（单位为度），skew:沿X和Y轴对元素进行斜切，matrix:允许以像素精度来控制变形效果。变形是在文档外发生的。一个变形的元素不会影响它附近未变形元素的位置。
transform-origin:注意在CSS里，默认的变形原点是在正中心：元素X轴的50%和Y轴的50%处。这个和SVG默认的左上角是不同的。使用transform-origin,我们可以修改变形原点。第一个值是水平方向上的偏移量，第二个值是垂直方向上的偏移量。关键字代表方向的数值。如果使用长度，它们会相对元素左上角计算该点位置。
CSS3实现翻转元素
.flipper { ???perspective: 400px; ???position: relative; ???width: 300px; ???height: 44px;}.flipper + .flipper { ???margin-top: 1em;}.flipper-object { ???position: absolute; ???width: 100%; ???height: 100%; ???transition: transform 1s; ???transform-style: preserve-3d;}.panel { ???display: flex; ???min-height: 44px; ???align-items: center; ???justify-content: center; ???top: 0; ???width: 100%; ???height: 100%; ???position: absolute; ???backface-visibility: hidden;}.flipper-vertical .back { ???transform: rotateX(180deg);}.flipper-horizontal .back { ???transform: rotateY(180deg);}.back { ???background-color: #CC3232;}.front { ???background-color: #739328;}.flipper:hover .flipper-vertical { ???transform: rotateX(180deg);}.flipper:hover .flipper-horizontal { ???transform: rotateY(180deg);}其中比较关键的元素是:transform-styles:preserve-3d;这告诉浏览器，当我们要为这个元素创造变形效果时，它的子元素也保持3D效果。perspective可以给元素设置透视（浏览器支持不好）。backface-visibility:hidden;这个属性定义元素不面向元素时是否隐藏。默认隐藏元素，可以翻转180度。hover时，元素翻转180%。
transform3d这个属性，可以在X,Y,Z轴上移动元素。
transform3d最大用处在于将面板移入移出屏幕，尤其是如“离屏”导航模式。
CSS 变形动画 水平，垂直翻转元素
原文地址：https://www.cnblogs.com/wlxll/p/8461392.html