2D动画效果变换中的旋转和平移效果


<html>
    <head>
        <meta charset="UTF-8">
        <title>2D变换中的旋转和平移效果title>
        <style>
            #mydiv{
                width: 200px;
                height: 200px;
                background-color: red;
                margin:200px;
            }
            #mydiv:hover{
                transition: all 4s;
                /*平移效果*/
                /*transform: translateY(-150PX);
                -webkit-transform: translateY(-150px);*/
                /*旋转效果*/
                transform: rotate(40deg);
                -webkit-transform: rotate(40deg);
                /*调整旋转中心*/
                transform-origin: 50%,50%;
                -webkit-transform-origin:50% 50% ;
            }
        style>
    head>
    <body>
        <div id="mydiv">div>
    body>
html>

你可能感兴趣的:(HTML5)