<style> #Arrow { margin: 200px; width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid orangered; /* 一定时间平滑过渡 */ transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; } #Arrow:active { transform: rotateZ(180deg); -o-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); } </style> </head> <body> <div ></div> </body>