先开始写门的案例

结构:

在这里遇到的问题就是定位 问题 哟啊看好父相子绝。还有就是旋转 左面用的是        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;  平常也会遇到定位不对 看机这个用父相子绝就可以了!!!!!!!!!!!

更多推荐