zoukankan      html  css  js  c++  java
  • css3中的提供的元素变化属性

    通过 CSS3 提供的2d元素转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

    css3中为我们 提供了:

    translate()

    rotate()

    scale()

    skew()

    matrix() 些方法来对对象进行位移,旋转,缩放,或者拉伸。

    注意:Internet Explorer 10Firefox 以及 Opera 支持 transform 属性。

    1. translate() 方法,元素从其当前位置移动,根据给定的 left坐标) 和 top坐标) 位置参数值移动。

    {

    transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */

    }

     

    2. ranslate() 方法,规定按照顺时针方向旋转设定的角度。

    {transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}

    设置角度为30度的偏转。

     

    3. scale()方法 元素的尺寸根据给定的参数放大或者缩小,宽度为x轴,高度为y轴。

    {transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}

    4. skew()方法 元素翻转给定的角度,根据给定的水平线(轴)和垂直线(轴)参数。

    div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}

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

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

    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 */}

    以上为css3提供的2d属性,希望对大家的学习有帮助。

  • 相关阅读:
    Maven常用命令
    SpringBoot实战(十三)之缓存
    python3对数据库的基本操作
    Microsoft visual c++ 14.0 is required问题
    python3之安装mysql问题
    如何将pip更新到最新版
    Java特性之继承的应用
    人人开源之代码生成器(renren-generator)
    《你凭什么做好互联网》之思维导图归纳
    GETOBJECTOPTIONS
  • 原文地址:https://www.cnblogs.com/wuph/p/4530700.html
Copyright © 2011-2022 走看看