《图解CSS3》笔记2 transform变形

2D transform支持4种变形方式和矩阵, 多种变形函数以空格隔开:

1. 移动  translate(+-xOffset, yOffset)  +右移-左移

2. 缩放  scale(0.01~0.99| >1)      0.01~0.99为缩小,>1为放大

3. 翻转  skew()

4. 旋转  rotate(+-Xdeg)        +顺时针转,-逆时针转X度

5. 矩阵  matrix()

3D transform支持3种变形方式和矩阵, 多种变形函数以空格隔开:

1. 移动  translate3d(x, y, z)     translateZ()

2. 缩放  scale3d()          scaleZ()     

3. 旋转  rotate3d()          rotateZ()  rotateX() rotateY()

4. 矩阵  matrix3d()

5. 投影  perspective()

transform-origin: 用来指定变形时,元素中心点的位置(默认:50%),取值有两类:

  1. 关键字:  left center right | top center bottom

  2. 偏移量:   -100% 0% 50% 100% 200%

transform-style: 指定3D控件中,内嵌子元素如何呈现,两个值:

  1. flat:   (默认)子元素在2D平面呈现

  2. perserve-3d: 子元素呈现在前面或后面

perspective:  观察者与元素3D控件内Z平面的距离(视距):

  1. none  (默认)无线远的角度来看,近乎于平

  2. 数值  数值越大,距离越远,感受越不明显;数值越小,距离越近,感受明显;

backface-visibility: 元素的背面是否可见,有两个值: visible | hidden;

时间: 2025-01-12 01:35:48

《图解CSS3》笔记2 transform变形的相关文章

图解css3 -- 笔记2

text-shadow text-shadow:none|[color  x-offset  y-offset  blur-radius] 注意: 在ie下,可以使用滤镜filter:shadow(Color=颜色值, Direction=数值, Strength=数值) 其中:Direction用来设置投影的方向,0度在文本的上面,45度在文本的右上角,依次 Strength用来设置阴影的强度 text-overflow 有两个值:clip不显示省略标记(…),只剪裁 ellipsis文本溢出

《图解CSS3》——笔记(一)

作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月14日14:46:35 第一章  揭开CSS3的面纱 1.1  什么是CSS3 CSS2.1是单一的规范,而CSS3被划分成几个模块组,每个模块组都有自己的规范. 1.1.1  CSS3新特性 1.强大的CSS3选择器 2.抛弃图片的视觉效果 3.背景的变革 4.盒模型变化 5.阴影效果 6.多列布局和弹性盒模型布局 7.Web字体和Web Font图标 8.颜色与透明度 9.圆角与

CSS3 Transform变形理解与应用

CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.可以设置多个关键贞. Transition与Animation:transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素cs

《图解CSS3》——笔记(二)

作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月15日15:58:11 第二章  CSS3选择器 2.1  认识CSS选择器 2.1.1  CSS3选择器的优势 2.1.2  CSS3选择器分类 ┌─1)基本选择器 ┌─3)动态伪类选择器 ├─2)层次选择器 ├─4)目标伪类选择器 CSS3选择器──┼─伪类选择器───────┼─5)语言伪类选择器 ├─9)伪元素 ├─6)UI元素状态伪类选择器 └─10)属性选择器 ├─7)结

css3新属性transform 3D的基础笔记.

研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子: <style> #box{ -webkit-perspective:800px;//定义3D场景大小 -webkit-transform-origin:50%

《图解CSS3:核心技术与案例实战》

<图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日期:2014 年7月 开本:16开 页码:486 版次:1-1 所属分类:计算机 > 数码/设计 > CSS 更多关于>>> <图解CSS3:核心技术与案例实战> 编辑推荐 资深Web前端专家历时两载的经验与心血之作,旨在根据最新CSS3规范撰写最权威的CSS3学习资

CSS3 转换2D transform

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧. 语法: transform : none | <transform-function> [ <transform-fun

CSS3 translate、transform、transition区别

translate:移动, transform的一个方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); -o-transform: translate(50px,100px); -mo

CSS3动画特效——transform详解

CSS3动画特效——transform详解 公共css .common{ width:100px; height:100px; margin:20px auto; background-color:#75C934; text-align:center; line-height:100px; font-size:18px; } 1)transform:rotate(value); 元素旋转 value为旋转度数 默认顺时针旋转. value若为负值则逆时针旋转. .box{ /*过渡效果*/ -w