慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

难得糊涂335338

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 HTML代码： <div class="wrapper"> <div></div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 1px dotted red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2018-03-22
luckymore

这样吧。。。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2014-12-14
旭日飞鹏

火狐-moz,谷歌-webkit,IE -ms,opera -o

查看全部

0 采集收起来源：什么是CSS3？
2014-12-13
BINGO人生

stretch round repeat

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2014-12-12
Chris哥

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，前缀浏览器 -webkit chrome safari -moz firefox -ms IE -o opera

查看全部

0 采集收起来源：什么是CSS3？
2014-12-12
flvna

跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现。语法：column-span：none | all 取值说明： none：此值为column-span的默认值，表示不跨越任何列。 all：这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Z轴之上。

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2014-12-12
_我已经从中二毕业了

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2014-12-12
_我已经从中二毕业了

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。重点：如果需要深入了解，需要对数学矩阵有一定的知识。

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2014-12-17
_我已经从中二毕业了

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2014-12-12
_我已经从中二毕业了

缩放scale()函数让元素根据中心原点对对象进行缩放。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2014-12-12
人生若只如初见_0022

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示；

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2014-12-12
_我已经从中二毕业了

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2014-12-12
_我已经从中二毕业了

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2014-12-12
_我已经从中二毕业了

1.使用结构伪类选择器:nth-of-type() 2.使用伪元素::after制作圆形效果 3.使用伪结构选择器:nth-of-type()，并且配合::after 4.使用伪类选择器::before给缩略图添加蒙板效果 5.通过:hover和::before配合修改opacity的值为0 6.通过目标选择器:target进行背景图片的切换 7.通过否定选择器:not()和目标选择器:target来控制不是被切换的背景图像不显示

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-02-25
人生若只如初见_0022

.columns { width: 500px; padding: 5px; border: 1px solid green; margin: 20px auto; -webkit-columns: 100px 4; -moz-columns: 100px 4;//设置文章按多列显示 100px 一列的宽度 4 列数 -o-columns:100px 4; -ms-columns: 100px 4; columns: 100px 4; }

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2014-12-12

首页上一页 1186 1187 1188 1189 1190 1191 1192 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果