CSS#提供的变形支持

transform:该属性设置HTML组件横向上移动tx距离,纵向上移动ty距离。其中ty参数可以省略,如果省略ty参数,则ty默认为0

  • translate(tx,ty):该函数设置HTML组件横向上移动tx个距离,纵向上移动ty距离。
  • translateX:该函数设置HTML组件横向上移动tx个距离。
  • translateY:该函数设置HTML组件横向上移动ty距离。
  • scale(sx,sy):该函数设置HTML组件横向上缩放比例为sx,纵向上缩放比例为sy。
  • scaleX:
  • scaleY:
  • rotate(angle):该函数设置HTML组件顺时针转过angle角度。
  • skew(sx,sy):该函数设置HTML组件沿着X轴倾斜sx角度,沿着Y轴倾斜sy角度。
  • skewX:
  • skewY:
  • matrix:(m11,m12,m21,m22,dx,dy):这是一个基于矩形变换的函数。其中前面四个参数将组成变形矩阵;dx,dy将负责对坐标系统进行平移。

transform-origin:该属性设置变形的中心点。该属性值应该制定为xCenter yCenter,其中xCenter、yCenter支持如下几种属性

  • left:制定旋转中心点位于HTML组件的左边界。该属性值只能制定为xCenter。
  • top:
  • right:
  • bottom:
  • center:指定旋转中心点位于HTML组件的中间。如果将xCenter,yCenter都指定为center,则旋转中心点位于HTML元素的中心。
  • 长度值:指定旋转中心点距离左边界、右边界长度
  • 百分比:指定旋转中心点位于横向、纵向上的百分比
时间: 2024-10-11 04:58:28

CSS#提供的变形支持的相关文章

Css中的变形及过渡动画

在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对于<transform-function>这一属性值,css中规定了4类常用变换 1.translate() 该值指定对象的2D translation(2D平移).第一个参数对应X轴,第二个参数对应Y轴.如果第二个参数未提供,则默认值为0 . 例: .exp{ width:150px; heig

Android菜鸟的成长笔记(28)——Google官方对Andoird 2.x提供的ActionBar支持

在Google官方Android设计指南中(链接:http://www.apkbus.com/design/get-started/ui-overview.html)有一个新特性就是自我标识,也就是宣传自己,所以很多应用现在也自然的使用ActionBar并提供自己的logo. 微信的应用: Google的Android设计指南中是这样说的:应用的 启动图标 作为启动应用的入口是展示 logo 的最佳场所.你也可以将启动图标放置在 操作栏 上,从而保证在应用内的所有页面上都能看到它. 在使用Act

8 -- 深入使用Spring -- 8...1 Spring提供的DAO支持

8.8.1 Spring提供的DAO支持. DAO模式是一种标准的Java EE设计模式,DAO模式的核心思想是,所有的数据库访问都通过DAO组件完成,DAO组件封装了数据库的增.删.查.改等原子操作.业务逻辑组件依赖于DAO组件提供的数据库原子操作,完成系统业务逻辑的实现. 对于Java EE应用的架构,有非常多的选择,但不管细节如何变换,Java EE应用都大致可分为如下三层. ⊙ 表现层. ⊙ 业务逻辑层. ⊙ 数据持久层. 轻量级Java EE架构以Spring IoC容器为核心,承上启

Lining.js - 为CSS提供 ::nth-Line 选择器功能

在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际上这期选择器在某些情况下是非常有用的,Lining.js 提供了这样的功能. 在线演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发

Dubbo源码分析(三):自定义Schema--基于Spring可扩展Schema提供自定义配置支持(spring配置文件中 配置标签支持)

在很多情况下,我们需要为系统提供可配置化支持,简单的做法可以直接基于Spring的标准Bean来配置,但配置较为复杂或者需要更多丰富控制的时候,会显得非常笨拙.一般的做法会用原生态的方式去解析定义好的xml文件,然后转化为配置对象,这种方式当然可以解决所有问题,但实现起来比较繁琐,特别是是在配置非常复杂的时候,解析工作是一个不得不考虑的负担.Spring提供了可扩展Schema的支持,这是一个不错的折中方案,完成一个自定义配置一般需要以下步骤: 设计配置属性和JavaBean 编写XSD文件 编

CSS选择器的浏览器支持

CSS1   CSS2   CSS 3   :hover 在IE6中只有a元素可用. E:empty 貌似在webkit核心浏览器中有些小bug. 如果这个bug依然存在,不太确定如何测试. IE6不支持.class1{}.class2{}双类选择器. IE8注意事项: E[attr]选择器在值为空的时候或者写错的时候,将不会生效: IE8支持CSS2.1的所有属性,支持伪类,但是不支持伪元素. IE8中的IE7兼容模式 E[attr] 和IE8一样,值为空或写错的时候,无效: E[attr~=

从0构建webpack开发环境(二) 添加css,img的模块化支持

在一个简单的webpack.config.js中,构建了一个基础的webpack.config.js文件,但是只支持js模块的打包. 本篇中添加对css和img的模块化支持 首先需要安装三个个loader css-loader, style-loader,file-loader yarn add css-loader style-loader css-loader用于对css文件的解析,style-loader会将解析的css样式以style标签的形式插入到html文件中 安装好之后,需要修改w

【Mail】Tomcat提供JNDI方式支持JavaMail(三)

流程介绍 Tomcat提供了JavaMail的支持,是通过JNDI的方式实现的,具体流程是: Tomcat启动的时候,自身产生一个Session对象,放在JNDI容器中给其他项目调用,其他项目只要通过JNDI API就能获取JNDI中的对象,并在项目中使用. 使用步骤 配置JNDI资源:新建一个javaweb的maven项目,并在webapp/META-INF中新建一个文件context.xml. context.xml文件内容如下: 1 <Context> 2 <Resource na

js动画 Css提供的运动 js提供的运动

1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: Attr 是变化的属性 Time 是花费的时间 Linear 变化的速度 Delay 是延迟 复习background:url() no-repeat 50% 50% red; Background-image Background-repeat Background-position Backgr