2D翻转效果之CSS

翻转效果，其实是利用了旋转的属性方法，即：transform：rotate();
旋转rotate()，指的是让元素在二维平面中，顺时针或者逆时针方向进行旋转。旋转单位是deg（度），即degree的缩写。
该属性仅可以有一个度数值，正值表示顺时针旋转，负值表示逆时针旋转，默认旋转的原点是元素的中心，也就是元素中的X轴和Y轴的中心点，该属性也可以指定方向旋转：

1. transform：rotateX (); 指定X轴方向旋转
2. transform：rotateY ();指定Y轴方向旋转

翻转实例：
   实现两个块元素的翻转效果。

分析：

1. 两个块元素需要在同一位置显示（用定位）
2. 鼠标滑过p标签时，发生旋转
3. 元素翻转的时候，需要隐藏背面，使得第二个元素显示。
4. 旋转原点需要指定Y轴方向

CSS样式

 <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid rgb(211, 151, 191);
            margin:100px auto;
            text-align: center;
            line-height: 300px;
            position: relative;   /*定义包含块*/
        }
        p{
            width: 300px;
            height: 300px;
            border: 1px solid rgb(170, 104, 74);
            /* 使用绝对定位，使其两张图片显示在同一位置 */
            position:absolute;
            top:100px;left: 100px; 
            /* 过渡效果延长时间 */
            transition: 2s;
        }
        p:nth-child(1){
            background-color: pink;
            z-index: 1;
            /* 隐藏元素背面属性 */
            backface-visibility: hidden;
        }
        p:nth-child(2){
            background-color: rgb(192, 255, 250);
        }
        /* 鼠标滑过p标签时，发生旋转 */
        p:hover{
        /*  指定Y轴方向旋转180度 */
            transform: rotateY(180deg);
        }
    </style>

HTML代码

<div>
    <p>吃饭</p>
    <p>减肥</p>
</div>

初始效果图：

当不添加隐藏背面元素（ backface-visibility: hidden;）时的翻转效果图：

指定Y轴旋转180度时的效果图：
下图是正在旋转的时候截取的

实现鼠标滑过后翻转的效果图：