zoukankan      html  css  js  c++  java
  • CSS3 转换 transform

    2D变换方法:一般用于hover

    • translate()
    • rotate()
    • scale()
    • skew()
    • matrix()

      1translate()方法 ---移动

      translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

      实例 translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素

      div

      {

      transform: translate(50px,100px);

      -ms-transform: translate(50px,100px);/* IE 9 */

      -webkit-transform: translate(50px,100px);/* Safari and Chrome */

      }

      2rotate()方法 ---旋转

      rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转

      实例 rotate值(30deg)元素顺时针旋转30度

      div:hover

      {

      transform: rotate(30deg);

      -ms-transform: rotate(30deg);/* IE 9 */

      -webkit-transform: rotate(30deg);/* Safari and Chrome */

      }

      3scale()方法 ----放大(缩小

      scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

      实例 scale(2,4)转变宽度为原来的大小的2倍,和其原始大小4倍的高度

      div:hover

      {

      transform: scale(2,4); 

      -ms-transform: scale(2,4);/* IE 9 */

      -webkit-transform: scale(2,4);/* Safari and Chrome */

      }

      4skew()方法 ---倾斜

      skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:

      实例 skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素

      div:hover

      {

      transform: skew(30deg,20deg);

      -ms-transform: skew(30deg,20deg);/* IE 9 */

      -webkit-transform: skew(30deg,20deg);/* Safari and Chrome */

      }

      matrix()方法

      matrix()方法把所有2D转换方法组合在一起。

      matrix()方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

      实例 如何使用 matrix 方法将 div 元素旋转30度:

      div

      {

      transform:matrix(0.866,0.5,-0.5,0.866,0,0);

      -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* IE 9 */

      -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Firefox */

      -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */

      -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Opera */

      }

       





  • 相关阅读:
    jQuery邮箱验证
    查看图片前进后退效果
    jQuery实现全选与反选
    jQuery在p前后添加节点
    jQuery中的fadeIn、fadeOut、fadeTo的应用
    jQuery中图片隐藏效果的所有方法
    jQuery中animate的应用(图片自动移动)
    jQuery图片复制
    N!具体数值有多少位数字
    顺序队列的初始化,建立,插入,查找,删除。
  • 原文地址:https://www.cnblogs.com/mmyh/p/7154283.html
Copyright © 2011-2022 走看看