具有翻转效果的登录和注册界面的实现

.login .demo-login,.demo-register {
    transform: translate(-50%,-50%) rotateY(180deg);
    backface-visibility: hidden;
    transition: all 1s;
  }
 
.login .demo-register,.demo-login {
    transform: translate(-50%,-50%) rotateY(0deg);
    backface-visibility: hidden;
    transition: all 1s;
} 

可以通过js给前面加个.login，如果有.login的话，.demo-register肯定就比不上.login .demo-register，所以就会显示.login .demo-register的样式，此时这个页面就不会发生翻转；而此时显示.login .demo-login，这时候登录页面会发生180度的翻转，这时候显示在最前面的就是注册页面。

而如果通过js把.login移除的话，就会显示.demo-register和.demo-login的样式，这样注册页面翻转180度，登录页面没有翻转，然后显示在最前面的就是登录界面了。

理解：

1、

A，B：任意选择器 A or B

div,p {

}

表示所有的div或者p标签。

2、

3、

backface-visibility 属性定义当元素不面向屏幕时是否可见。

visible	背面是可见的。
hidden	背面是不可见的。

4、

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

translate(-50%,-50%)可以实现居中效果

rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

rotateY(180deg)可以实现翻转作用。

但是：

明显，设置了rotateY之后，它发生了位移，这是由于它覆盖了原本的transform的样式

而

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

则可以实现居中效果

5、transition(all,1s):所有的属性，都需要1s来完成过渡效果

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。