CSS3 (二)

translate() 方法

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

示例:

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

值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

rotate() 方法

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

实例

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

值 rotate(30deg) 把元素顺时针旋转 30 度。

scale() 方法

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

示例代码:

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

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

skew() 方法

通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

示例代码

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

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

transform:向元素应用 2D 或 3D 转换。

时间: 2024-10-24 05:36:53

CSS3 (二)的相关文章

玩转CSS3(二)---CSS3实现瀑布布局

觉得腾讯微博微频道里的那种布局方式很好,在这里利用CSS3简单的实现了一下. 先上一张效果图: 代码: pubu.css /* CSS Document */ .container{ width:60%; margin-left:20%; margin-right:20%; background:#61A5D1; float:right; /*盒子*/ -webkit-column-width:160px; -moz-column-width:160px; -o-colum-width:160p

css3 选择器(二)

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当“:nth-child(n)”选择器中的n为一个表达式时,其中

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

CSS3实现8种Loading效果【二】

CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

《CSS3实战》笔记--选择器(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011. UI元素状态伪类选择器 ??UI元素的状态一般包括:可用.不可用.选中.未选中.获取焦点.失去焦点.锁定.待机等. 表单设计原则: ??UI设计的一个核心就是让表单更可用.易用和好用.表单设计应该符合三层模型,即表单应该具有三种属性:感知(页面显示的布局).对话(内容呈现的问题和回答).关系(交互的任务结构). ???????? 实战体验一:设计可用的表单 ??设计并实现简洁.美观.可

响应式布局(二)—— CSS3 Media Query

响应式布局有三种实现方式: CSS3 Media Query 原生 JS 代码 第三方开源框架(最常见的有 bootstrap) CSS3 -- Media Query 1. 媒体查询实现方式 方式一:styleSheet样式表中的写法: 如:<style>标签中使用@media <style> @media screen and (min-width: 480px) { body{background: blue;} } </style> 方式二:<link&g

CSS3中的弹性流体盒模型技术详解(二)

在上一篇文章<CSS3中的弹性流体盒模型技术详解(一)>里,我给大家列出了,从css1到css3各版本中盒子模型的基本元素.本篇我会把余下的属性进行详细讲解. box-pack 作用:用来规定子元素在盒子内的水平空间分配方式 box-pack 语法:box-pack: start | end | center | justify; start 对于正常方向的框,首个子元素的左边缘吸附在盒子的左边框显示 对于相反方向的框,最后子元素的右边缘吸附在盒子的右边框显示 end 对于正常方向的框,最后子

CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

经常被忽略的几个CSS3属性之强大应用(一、timing-function: steps() 二、animation-direction  三、timing-function: cubic-bezier())

一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了steps和右边没加的区别.左边的是一锤一锤的,右边会出现影子. [注意下面这个demo在firefox中不能执行,只能在chrome中执行,因为我动画的是“background-image”属性] 代码如下,我只把关键的几个代码贴出来了,详细的可以 .btn-pay { 02   background