一.2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:translate() 参数说明: (1)只有一个值的情况下,表示水平方向运动,正值向右,负值向左,也可以接受百分比,百分比参照的是自身的宽,高 (2)两个值分别控制水平和垂直 (3)移动不会影响其他的元素,类似于相对定位 (4)我们可以通过盒子的绝对定位配合transform:translate(-50%,-50…

3 D (3.1)rotateY 围绕着Y轴进行旋转 (1)正数是(站在右边推),负数是(站在左边推) (2.1)定义元素背过去是否可见 backface-visibility: visible|hidden; 说明:visible表示可见,hidden表示不可见 测试贝塞尔曲线的网址:http://xuanfengge.com/easeing/ceaser/ (1)translateZ 就是在Z轴上来回移动,但是如果没有透视的情况下,完全看不出效果,所以,一般transform:transla…

一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } /* 多个属性 */ div{ transform:rotateX(1px)…

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)…

CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-left 相同.如果省略 top-right,则与 top-…

[02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth castro bruce hyslop 著 望以文 译     2014年5月 出版.   亚马逊: https://www.amazon.cn/HTML5%E4%B8%8ECSS3%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B-%E7%BE%8E-Elizabeth-Castro…

学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. @font-face { font-family: myFonts;//定义字体名称 src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源 可选.ttf..eot..otf等三种格式文件 } PS:为了兼容不同浏览器最好…

CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现的效果是: 2.CSS定位与浮动 1)定位: 属性 描述  position 把元素放到一个静态的(static:元素框正常生成),相对的(relative:元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置]),绝对的(absolute:元素框从…

CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径向渐变则是以一个点为基点(圆心),以点向四周进行渐变.渐变形状为一个圆,重复渐变则分为重复线性渐变和重复径向渐变,是对于前面两种渐变的一种重复模式. 语法: linear-gradient:point| angle color percentage point表示方向,angle表示角度. colo…

一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 在html页面中用尖括号括起来的叫做标签(标记符号) 分类 双标签:成对出现的标签.html body 单标签:只存在一个标签.img meta 四.DOCTYPE 作用:告知浏览器解析本文档的 规范,它不是一个标签 五.注释标签 ctrl+/ 代码失效 注释说明 六.图片标签 img+tab键 属…