• 使用css3属性,大部分浏览器要识别前缀


    例如以下代码的解析

    -ms-transform:rotate(7deg);

    -moz-transform:rotate(7deg);

    -webkit-transform:rotate(7deg);

    -o-transform:rotate(7deg);

    首先transform字母上就是变形,改变的意思。在css3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看css3中transform的旋转rotate/扭曲skew、缩放scale和移动translate

    语法:

    transform: none|<transform-function>[<transform-function>]*

    也就是:

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

    none:表示不进么变换;<transform-function>表示一个或多个变换函数,以空格分开;换句话的就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种但这里需要提醒大家的,以往我们叠加效果都是用逗号(",")隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

    取值:

    transform属性实现了一些可用svg实现的同样功能。它可用内联元素和块级元素。它允许我们旋转、缩放和移动元素,它有几个属性值参数:rotate;translate;scale;skew;matrix.

    旋转rotate:

    rotate(<angle>):通过指定的角度参数对原元素指定一个2D rotation(2D旋转),需先有transform-origin属性的定义。transform-origin定义的旋转的基地,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg)


    -ms-transform:rotate(7deg); //-ms代表ie内核识别码
    -moz-transform:rotate(7deg); //-moz代表火狐内核识别码
    -webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码
    -o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码
    transform:rotate(7deg); //统一标识语句。。。最好这句话也写下去,符合w3c标准

    使用css3属性时,大部分都要带这些识别前缀,早期点的浏览器才能识别,后来有整合一个js文件的,不写这个也可以网上搜索下这个文件,嵌入页面就好了


  • 相关阅读:
    MFC编程入门之二十八(常用控件:列表视图控件List Control上)
    Discuz X1.5 利用添加好友处存储xss进行蠕虫worm扩散
    全民wifi钓鱼来临----agnes安卓wifi钓鱼神器介绍
    自改xss小平台上线
    谈网页游戏外挂之用python模拟游戏(热血三国2)登陆
    thinkpad t440p 解决无线网卡驱动
    编写php拓展实例--slime项目(用户登录会话类)
    用Tupper自我指涉公式造图
    一首歌
    rtx信息泄漏利结合弱口令导致被批量社工思路
  • 原文地址:https://www.cnblogs.com/liang1/p/4940078.html
Copyright © 2020-2023  润新知