backface-visibility使用问题

最近发现一个css的属性比较好玩，配合transform可以做到翻转的效果。但是遇到了坑。

预期实现效果：

原始代码： .content { position: absolute; top: 50%; left: 50%; margin: -210px 0 0 -160px; width: 320px; height: 420px; backface-visibility: hidden; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 ); box-shadow: -15px 15px 15px rgba(0,0,0,.4); background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%); padding: 60px 40px; transition: all 1s; }

.showBox{ transform:rotateY(0deg); }

.hiddenBox{ transform:rotateY(180deg); }

这样写会出现的结果是

如图背面有子元素残留

解决办法： css中加一行代码transform-style: preserve-3d，变成如下： .content { position: absolute; top: 50%; left: 50%; margin: -210px 0 0 -160px; width: 320px; height: 420px; backface-visibility: hidden; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 ); box-shadow: -15px 15px 15px rgba(0,0,0,.4); background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%); padding: 60px 40px; transition: all 1s; transform-style: preserve-3d; }