CSS3 实现翻转卡片效果 - 需要 CSS3 属性

perspective

目前浏览器都不支持perspective属性

在chrome和Safari中需要使用-webkit-perspective，而在Firefox中需要使用-moz-perspective来定义。

定义和用法

perspective属性定义3D元素距视图的距离，以像素计。该属性允许改变查看3D元素的视图。当为元素定义

perspective属时，其子元素会获得透视效果，而不是元素本身。换句话说，设置这个元素是为了给该元素的子元素用。

值

number：元素距离视图的距离，以像素计

none：默认值，与0相同。不设置透视

Firefox支持transfrom-style属性。

Chrome、Safari和Opera支持代替的-webkit-transform-style属性。

定义和用法

transform-style属性固定如何在3D空间中呈现被嵌套的元素。一般给父元素设置让其所有子元素跟着父元素一起位置移动，一般会设置。

值

flat：子元素将不保留其3D位置（默认值）

perserve-3d：子元素将保留其3D位置

transition

IE10+、Firefox、Opera、Chrome均支持transition属性。Safari支持替代的-webkit-transition属性。但是IE9-不支持该属性。

定义和用法

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

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

transiton-duration必须设置，否则时长为0 ，不会有过渡效果

backface-visibility

只有IE10+和Firefox支持backface-visibility，Opera15+、Safari和Chrome支持替代的-webkit-backface-visibility

定义和用法

backface-visibility属性定义当前元素不面向屏幕时是否可见，如果元素在旋转后不希望看到背面，则可以使用。

visible：背面是可见的（默认值）

hidden：背面是不可见的