头像选中旋转360度

a img {
    webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    /* 动画还原时间 速率 */
    transition-duration:0.7s; 
}
a:hover img {
    /* 透明度 */
    /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity = 60); IE滤镜，透明度60%
    -moz-opacity: 0.6; Firefox私有，透明度60%
    -khtml-opacity: 0.6;
    opacity: 0.6; 其他，透明度60% */
    /* 图片旋转360 */
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition: rotate(360deg);
    -ms-transition: rotate(360deg);
    /* 动画执行时间 速率 */
    transition-duration:0.7s;             
}

transition

    transition允许css的属性值在一定的时间区间内平滑地过渡，语法如下：

    transition：transition-propertytransition-durationtransition-timing-functiontransition-delay[,...]

    transition的相关属性：

    transition-property：用来指定执行transition效果的属性，可以为none,all或者特定的属性。

    transition-duration：动画执行的持续时间，单位为s（秒）或者ms（毫秒）。

    transition-timing-function：变换速率效果，可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定义时间曲线）。

    transition-delay：用来指定动画开始执行的时间，取值同transition-duration，但是可以为负数。

    transform

    transform分为2D和3D，这里暂时只介绍比较常用的2Dtransform，其主要包含以下几种变换：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix，语法如下：

    transform:rotate|scale|skew|translate|matrix;

    transform的相关属性：

    rotate旋转

    rotate的单位是deg度，正数表示顺时针旋转，负数表示逆时针旋转。

    scale缩放

    scale的取值范围是0~n，小于1时表示缩小，反之表示放大。例如scale(0.5,2)表示水平方向缩小1倍，垂直方向放大1倍，另外，也可以通过scaleX或者scaleY对一个方向进行设置。

    skew扭曲

    skew的单位跟rotate一样都是deg度。例如skew(30deg,10deg)表示水平方向倾斜30度，垂直方向倾斜10度。

    translate偏移

    偏移同样包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）

效果参照本站头像