CSS3中Transform动画属性用法详解

2020-05-11 18:31:42易采站长站整理

            -moz-transform:skew(30deg,-20deg);  /* Firefox */   
            -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
            -o-transform:skew(30deg,-20deg);        /* Opera */   
            transform-origin:100% 100%;         /* W3C标准 */   
            -ms-transform-origin:100% 100%;     /* IE 9 */   
            -moz-transform-origin:100% 100%;    /* Firefox */   
            -webkit-transform-origin:100% 100%; /* Safari 和 Chrome */   
            -o-transform-origin:100% 100%;    
        }   
  
    </style>  
</head>  
<body>  
<div id="container">  
    <div id="div1">  
        <div>translate(基点为(left top)</div>  
    </div>  
    <div id="div2">  
        <div>rotate(基点为(0%, 0%)</div>  
    </div>  
    <div id="div3">  
        <div>scale(基点为(center, top)</div>  
    </div>  
    <div id="div4">  
        <div>skew(基点为(100%, 100%)</div>  
    </div>  
</div>     
</body>  
</html>  
  

效果如下:

对比发现:translate()方法与之前的没有区别,其他三个方法基点改变了,图形变形效果也有所变化。

3D transform变换方法