CSS 变形动画 水平，垂直翻转元素

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最大用处在于将面板移入移出屏幕，尤其是如“离屏”导航模式。

 

转载于:https://www.cnblogs.com/wlxll/p/8461392.html