今天完成：

1、 了解了翻转所需的几个属性；

2、 继续完成任务八

明天计划：

1、继续完善任务八

2、开始了解任务九

遇到的问题：

1、 在显示翻转效果时，使用display：none;diplay:none;会瞬间显示，并无翻转效果

解决：使用backface-visibility: hidden;可以将翻转的页面隐藏。

       在尝试绕Z轴旋转时，沿Z轴翻转无法隐藏，如果沿X轴翻转，后期设置翻转回再沿Y轴翻转，代码如下：

ransform: rotateX(360deg);

transform: rotateZ(720deg);

页面只会显示最后90度的沿X轴旋转效果，无法实现旋转效果。

解决：可以通过透明度掩藏，需要旋转时一并恢复透明度，需要注意的是，透明度也是随着transtion设置的时间而恢复的。

2、 翻转的视觉效果只在父元素内，且效果不明显。

解决：使用transform-style: 属性。transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

3、 使用@keyframes、animation属性实现飞入后，如何保持最后的状态？

解决：使用animation-fill-mode 属性，规定动画在播放之前或之后，其动画效果是否可见。

收获：

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

如果在旋转元素不希望看到其背面时，该属性很有用。

用法：backface-visibility: visible|hidden;

4、 transform-style 属性

使被转换的子元素保留其 3D 转换：

但在我自己的demo中添加了该属性，却使反转元素透明化，去掉后恢复正常，暂时只好在双面反转中使用……

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释：该属性必须与 transform 属性一同使用。

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

如果只是单纯的翻转，单纯设置perspective、transition、transform;即可实现视觉上的翻转，如果需要其他的样式，如旋转时间等等再陆续添加。

代码如下：

.flip-container{

            perspective: 1000px;

            border: 1px solid #000000;

        }

        .flip-container:hover .back{

            transition: 2s;

            transform: rotateY(360deg);

        }

4、兼容属性写法，加前缀

-moz代表firefox浏览器私有属性

-ms代表ie浏览器私有属性

-webkit代表safari、chrome私有属性