css实现三角动态翻转

.accordion{
           
            background-color: transparent;
            width:0;
            height:0;
            border: 6px solid transparent;
            border-top-color: #0ACCE0 ;
           -webkit-transition: -webkit-transform 0.2s ease-in;
           -moz-transition:   -moz-transform 0.2s ease-in;
           -o-transition:     -o-transform 0.2s ease-in;
           transition:        transform 0.2s ease-in;
       }
        .accordion:hover{
          
            border-top-color: transparent ;
            border-bottom-color: #0ACCE0 ;
            -moz-transform:          rotate(0deg);
            -webkit-transform:      rotate(0deg);
            -o-transform:           rotate(0deg);
            transform:             rotate(0deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
        }


<div class="accordion"></div>