[前端学习]CSS3部分学习笔记，第二天

transform转换

• transform与transition一样，默认都是:如果你以触发事件的方式来设置transform转换，那么默认触发结束后会还原样式值(3D是直接设置也会还原)

• 如果想让转换完之后，保留效果不还原，需要在父元素中设置transform-style:flat||preserve-3d。它的作用是让该元素的子元素转换后保留效果，flat是默认值不保留效果，preserve-3d是保留3D效果

2D转换

• 2D移动

  • transform:translate(x,y)使元素参照元素自身的左上角作X轴和Y轴的移动，写一个值默认是设置X轴

  • 如果你只想设置一个方向移动，那么将另一个值设置为0，或者直接写translateX、translateY都行

  • 如果translate中传入百分比，那么参照的值是自身的宽高，所以translate(-50%,-50%)配合定位的边偏移值也能实现水平垂直居中

• 2D缩放

  • transform:scale(x,y)使元素参照自身几何中心(就是元素的正中心)进行缩放，值>1.01表示放大，值<0.99表示缩小，注意元素缩放不会影响其他元素的正常布局

  • 如果写一个值默认是x轴和y轴同比例缩放，想单个设置可以用scaleX和scaleY

• 2D旋转

  • transform:rotate(xx角度)使元素参照对象原点，做2D旋转

  • 如果值是正值那么顺时针旋转，是负值逆时针旋转。2d旋转实际上就是参照Z轴做旋转。另外旋转会将坐标轴也旋转，所以一定不要先旋转再移动

• 设置旋转轴心点

  • transform-origin(坐标或者方位词)元素旋转默认是参照正中心点，使用这个方法可以修改元素旋转参照的对象原点

  • 参数可以写坐标值，也可以写方位词

• 2D斜切

  • transform:skew(x角度，y角度)使元素参照对象原点，做2D倾斜。如果角度值是正值往逆时针倾斜，如果角度值是负值往顺时针倾斜。设置两个值会先X轴倾斜，再Y轴倾斜

  • 如果想单个设置可以用skewX和skewY

  • 注意斜切和旋转不一样，旋转只是转变角度不改变元素形状，但是斜切只是改变元素形状不旋转。斜切实际工作中用得较少

• 为某个元素同时添加多个transform属性，直接连写用空格分隔

3D转换

• 3D实际上就是在2D的基础上多加了一条Z轴，Z轴是与屏幕垂直的。通过水平X轴、垂直Y轴、与屏幕垂直的Z轴，就组成了三维里立体的空间

• 3D移动

  • transform:translate3d(x,y,z)让元素以3D的方式来移动，注意这样写3个参数必须写全

  • 如果你不想设置两条轴的值，可以写0，或者分别写translateX、translateY、translateZ

• 3D缩放

  • transform:scale3d(x,y,z)让元素以3D的方式来缩放，注意这样写3个参数必须写全

  • 如果你不想设置两条轴的值，可以写0，或者分别写scaleX、scaleY、scaleZ

• 3D旋转(难点)

  • x，y，z实际上三条轴上的向量值，什么是向量值呢？相当于在轴上拉出设置值距离的线，然后让元素的旋转轴心跟这条线方向一样来进行旋转，一般要设置值都是1

  • 例如：设置x轴y轴相同的向量值，那么实际上产生的是一条平面的对角线。设置三条轴相同的向量值，那么产生的是一条立方体的对角线

  • 向量值的大小在当前轴没有任何影响，但如果多条轴的大小不一样，那么会改变轴心线的角度

  • 三维的东西通过文字很难描述和理解，建议通过案例图形来帮助理解

  • 左手法则：大拇指指向当前坐标轴的往后延伸的方向 ，手指环绕的方向就是正方向

  • transform:rotate3d(x,y,z,角度值)让元素以3D的方式来旋转

  • 如果只想单独参照某条轴作旋转，也可以写rotateY(角度)、rotateX(角度)、rotateZ(角度)

  • 以下是对前三个参数的详解：

景深透视

• perspective:xxp为元素添加一个景深透视距离，默认是0没有效果。它的默认透视角度实在Z轴等于0的那一面位置。如果设置的值小于你的立方体各条变宽度，就相当于在立方体内部观察整个盒子。如果大于或等于就相当于在外部看到盒子

• perspective-origin:x,y以镜头的角度来观察立方体，默认是在立方体的最中心点，通过设置x和y的值来调整镜头角度

• 这两个属性一般用得很少，了解即可

动画

• css3中自带了动画功能，也叫关键帧动画。动画本质上与过渡没有区别都是让某个元素移动的位置的时候，以动画的方式

• 但是过渡只能设置开始关键帧和结束关键帧，动画却可以通过关键字@keyframes以耗时百分比的形式来设置多个关键帧，实现多段动画移动的效果

• animation-name:设置好的动画名字在css3里动画不是直接设置，而是在外面通过关键字设置好，然后通过这个属性调用动画

• animation-duration:xxs动画耗时

• animation-iteration-count:x设置动画重复执行次数，如果设置infinite就是无限重复执行

• animation-deraction:alternate设置动画交替播放，即执行完一次后，终点和初始点互换再执行，然后这样反复交替执行

• animation-delay:xs设置动画延迟多少秒再执行

• animation-fill-mode设置动画结束时的状态，动画默认执行完也会还原，三个属性介绍：

  • forwards动画结束后保留其位置

  • backwards动画结束后不保留位置，但是如果该动画同时设置了延时以及初始样式，那么该属性会让元素立即进入初始样式

  • both综合了上面两个的特点，即会保留位置，设置了延时和初始样式也会立刻进入

• animation-timing-function:linear||ease||steps与过渡一样，设置动画执行的效果，匀速还是先快后慢还是一步一步执行

• animation-play-state:running||paused设置动画的播放和暂停，一般配合js来使用

• 时钟案例运用知识点较多，需要多理解透彻

web字体和字体图标

• web字体

  • 到相关web字体网站上生成你想展示的特殊字体，并下载

  • 在代码中使用@font-face关键字声明定义特殊字体

  • 定义特殊字体样式

  • 调用特殊字体样式

  • 在以前想要在页面上使用特殊字体，并显示到网页上必须用户设备上有对应字体才可以。现在css3新增了webfont功能，可以在页面上显示任意特殊字体，而跟用户设备没有关系

  • 使用方法很简单

  • 注意：web字体的生效只限于你生成的那几个字，并不是所有字体都能使用该样式，所以生成和使用时都要明白哪些字需要使用特殊字体

• 字体图标

  • 字体图标本质上就是字体，不过是以图标的形式展示，因是矢量字体，所以字体图标可以任意设置大小颜色，不会像图片那样失帧

  • 使用方法与web字体有点相似，都是从相关网站上下载对应字体图标，并通过关键字声明字体，再定义样式并调用

  • 但是要注意：因为字体图标是Unicode编码的形式，不方便阅读。所以最常见的使用方式是通过伪元素的方式来实现。定义一个与字体图标意义相关的类名，让该类名以伪元素的形式加入字体图标，再调用该类名即可。

  • 伪元素里content属性写unicode编码的时候，用\反斜杠来代替&#x

• web字体和字体图标在实际工作中都是很常用的，要记住怎么用。iconfont是个很不错的生成网站

多列布局

• 随着现在屏幕越来越大，宽度已经延伸了非常多。如果还像以前那样一行到底的显示文字，用户可能看两三行就视觉疲劳不看了。也因此，css3新增的多列布局属性，通过设置让本来通行的文字，分成几列来排列

• column-count:x该值为数值，当你为一段长文本设置此属性时，数值是几就分成几列，宽度平均分配

• column-ruler: 粗细 线类型 颜色设置每列间隙的样式，书写方式和边框一模一样

• column-gap:xxpx设置每列间距大小

• column-width:xxpx设置每列宽度，如果同时设置了列数和宽度，那么它会取大优先。就是说如果设置的宽度比平均分配的宽度大，那么应用这个样式。反之，应用列数样式。还有一点：分列之后，会自动填满整个屏幕，所以也可能出现实际宽度比你设置宽度大的情况

• column-span:1||all设置跨列显示，要么只显示在一列，要么横跨所有列

作者：印象rcj
链接：https://www.jianshu.com/p/a682cc2d8c34