当前位置: 首页 > news >正文

使用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文件的,不写这个也可以网上搜索下这个文件,嵌入页面就好了


 

转载于:https://www.cnblogs.com/liang1/p/4940078.html

相关文章:

  • 暴搜 - Codeforces Round #327 (Div. 2) E. Three States
  • iOS中正确的截屏姿势
  • Android Volley框架的使用(三)
  • IP工具类-自己动手做个ip解析器
  • CSS3 变换
  • 前端之React实战:创建跨平台的项目架构
  • 驱动的加载与卸载例程(C++/C)
  • 寻找
  • Apache 文件根目录设置修改方法 (Document Root)
  • UIView之【UIViewContentMode】
  • Oracle 错误总结及问题解决 ORA
  • android之intent显式,显式学习
  • Daily Scrum - 11/19
  • 标签禁用之readonly和disabled
  • 利用shell实现批量添加用户
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • canvas 五子棋游戏
  • Centos6.8 使用rpm安装mysql5.7
  • FineReport中如何实现自动滚屏效果
  • java中的hashCode
  • October CMS - 快速入门 9 Images And Galleries
  • orm2 中文文档 3.1 模型属性
  • React as a UI Runtime(五、列表)
  • vue-cli3搭建项目
  • WePY 在小程序性能调优上做出的探究
  • 翻译 | 老司机带你秒懂内存管理 - 第一部(共三部)
  • 经典排序算法及其 Java 实现
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 使用Gradle第一次构建Java程序
  • 算法之不定期更新(一)(2018-04-12)
  • 通过几道题目学习二叉搜索树
  • 回归生活:清理微信公众号
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • (5)STL算法之复制
  • (Java)【深基9.例1】选举学生会
  • (四) 虚拟摄像头vivi体验
  • (原創) X61用戶,小心你的上蓋!! (NB) (ThinkPad) (X61)
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NET 中什么样的类是可使用 await 异步等待的?
  • /var/log/cvslog 太大
  • @RestController注解的使用
  • [android] 天气app布局练习
  • [BZOJ 1032][JSOI2007]祖码Zuma(区间Dp)
  • [BZOJ 3680]吊打XXX(模拟退火)
  • [C#]C# winform实现imagecaption图像生成描述图文描述生成
  • [C++] cout、wcout无法正常输出中文字符问题的深入调查(1):各种编译器测试
  • [cocos2d-x]关于CC_CALLBACK
  • [LeetCode]-225. 用队列实现栈
  • [PHP] 算法-字符串的左循环的PHP实现
  • [Python进阶] 识别验证码
  • [Redis] Redisson实现分布式锁
  • [ThinkPHP]Arr返回1
  • [Unity]关于iOS申请因为Advertising Identifier问题被拒绝的解决方法