摘要：属性决定元素如何定位，通过实现位置的改变默认值，元素按照标准流的方式正常排列。绝对定位，不受父元素父容器限制。可以设置元素的叠加顺序，但依赖定位属性大的元素会覆盖小的元素为的元素不参与层级比较为负值，元素被普通流中的元素覆盖
transform 变形属性
属性：translate 平移，rotate 旋转, scale 缩放,skew 倾斜
◆ translate :指定对象的2D平移
第一个参数对应X轴，第二参数对应Y轴；如果第二个参数未提供，则默认为0；
translate(10px,10px)
X轴 往左边移动 对应第一个参数的值 就是正数值。
Y轴 往下面移动 对应第二个参数的值 就是正数值。
◆ rotate :控制对象的2D旋转，需要先定义transform-origin属性；
列：Rotate(90deg),transform-origin:0 0;
角度值 为 正数值 对象顺时针转，负数对象逆时针转；
transform-origin 如果不设置坐标，默认元素对象的中心点。
transform-origin:0 0; 以元素的左上角为中心点旋转；
◆ scale: 指对象的2D缩放。可以同transform-origin 一起使用。
第一个参数对应X轴 ；第二个参数对应Y轴；如果第二个参数未提供默认取第一个参数的值；
例如：scale(0.5,0.5);
参数值 为 1 时，不缩放，小于1时往里面缩小；大于1时，往大放。
配合transform-origin使用时，是沿着中心点缩放。
◆ skew : 指定对象斜切；
第一个参数对应轴，第二个参数对应Y轴；，如果第二个参数未提供默认为0；
例如：skew(50deg,2deg);
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ 3D
◆ style : 样式，变形样式；
transform-style:preserve-3d; 此设置3D变形效果;
X轴正方向往左边；Y轴正方向往下面；Z轴正方向面向屏幕前面，指向我们。
translateX(x px) ；X轴平移
translateY(y px) ；Y轴平移
translateZ(z px) ；Z轴平移
rotateX(x deg) ；沿着X轴进行旋转
rotateY(y deg) ；沿着Y轴进行旋转
rotateZ(z deg) ；沿着Z轴进行旋转
◆旋转中心设置：transform-origin
X轴 可设置为：left 或 center 或 right;
Y轴 可设置为：top 或 center 或 bottom；
Z轴 可设置为：length px; 具体长度；
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ transition 过度动画处理
transition:<过渡属性名称><过渡时间><过渡模式>
属性：property ,duration,timing-funciton,delay;
property : 检索或设置对象中的参与过渡的属性；设置原始的那些属性参与动画。
duration : 过渡动画的持续时间；
timing-function : 检索或设置对象中过渡的动画类型（
linear : 动画从头到尾的速度是相同的,
ease : 动画以低速开始，然后加快，在结束前变慢,
ease-in : 动画以低速开始,
ease-out : 动画以低速结束,
ease-in-out : 动画以低速开始和结束
）
delay : 设置对象延迟过渡的时间。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ position 属性决定元素如何定位，通过top,bottom,left,right实现位置的改变；
static：默认值，元素按照标准流的方式正常排列。
*-*-*-*-*-*-*-*-*-*-*-
relative：相对定位，相对元素自身原始位置，通过 top,bottom,left,right实现位置定位；
当处于父级容器中时，相对父级容器内，本身位置作为标准，通过 top,bottom,left,right进行定位；
*-*-*-*-*-*-*-*-*-*-*-
absolute：绝对定位，相对浏览器窗口的定位。
当父元素 是absolute定位或者relative时，那么子元素是按父元素进行absolute绝对定位。
当父容器没有定位，那么子元素按浏览器窗口进行定位。
*-*-*-*-*-*-*-*-*-*-*-
fixed:绝对定位，不受父元素父容器限制。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
z-index
可以设置元素的叠加顺序，但依赖定位属性
z-index 大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较；
z-index为负值，元素被普通流中的元素覆盖；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1071.html
摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块 其中最重要的 CSS3 新增实用模块包括： 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框: 用于创建圆角 border...
摘要：前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是，表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是，表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：硬件加速是指应用的图形性能对浏览器中的一些图形操作交给来完成，因为是专门为处理图形而设计，所以它在速度和能耗上更有效率。 在实习做一个移动项目的时候，实现一个动画效果，在 iPhone 和 Chrome 上调试没有问题，在千元左右的 Android 机上测试问题就很大了，卡顿非常明显，百思不得其解，吐血，卒。 这个悲伤的故事就是本文的引子，真真切切的体会到了 CSS 对用户体验的影响非...
阅读 2453·2021-11-16 11:45
阅读 2422·2021-10-11 10:59
阅读 2233·2021-10-08 10:05
阅读 3722·2021-09-23 11:30
阅读 2331·2021-09-07 09:58
阅读 752·2019-08-30 15:55
阅读 750·2019-08-30 15:53
阅读 1905·2019-08-29 17:00
