CSS3开门案例(背面隐藏问题)
·
先开始写门的案例
结构:

在这里遇到的问题就是定位 问题 哟啊看好父相子绝。还有就是旋转 左面用的是 transform-origin: left center; 这是旋转的方向。 右边的门是 transform-origin: right center; 接下来旋转门也就是 transform: perspective(700px) rotateY(-125deg)。 这个时间帧 transition: all 2s ease-in-out; 不要忘记加这个 transform-style: preserve-3d; 这是3d效果


接下来做门的正反面
隐藏背面属性一定要加backface-visibility: hidden; 和层级关系不要忘了加



接下来就是我们说一下遇到的常见的问题。平常简我们会遇到背景图会重复我们只要用 no-repeat就可以解决了如果在遇到一个就是没有填满 background-size: cover; 平常也会遇到定位不对 看机这个用父相子绝就可以了!!!!!!!!!!!
更多推荐
所有评论(0)