body { background:url("//www.jq22.com/gxwj/bg.jpg") no-repeat; } #butterfly { width:600px; height:500px; position:relative; transform:scale(0.35); transform-style:preserve-3d; } .leftSide { width:267px; height:421px; background:url("//www.jq22.com/gxwj/leftSide.png") no-repeat; position:absolute; left:26px; top:40px; animation:left 2s infinite; z-index:9999; } @keyframes left { 0% { transform:rotateY(0deg); transform-origin:right center; perspective:201px; } 50% { transform:rotateY(70deg); transform-origin:right center; perspective:201px; } 100% { transform:rotateY(0deg); transform-origin:right center; perspective:201px; } }@keyframes right { 0% { transform:rotateY(0); transform-origin:left center; perspective:201px; } 50% { transform:rotateY(-70deg); transform-origin:left center; perspective:201px; } 100% { transform:rotateY(0); transform-origin:left center; perspective:201px; } }.body { width:152px; height:328px; background:url("//www.jq22.com/gxwj/body.png") no-repeat; position:absolute; margin:auto; left:0; right:0; bottom:0; top:0; z-index:9999; } .rightSide { width:284px; height:460px; background:url("//www.jq22.com/gxwj/rightSide.png") no-repeat; position:absolute; right:26px; top:58px; animation:right 2s infinite; z-index:9999; }