transition过渡

backface-visibility元素背面面向用户时是否可见设置元素背面面向用户时是否可见。在旋转元素不希望看到其背面时，该属性很有用。通常需要配合transform-style：preserve-3d的使用，backface-visibility的效果才能生效。因为需要在3d的环境中才能看到元素的背面。决定一个元素背面面向用户时是否可见，需要直接在该元素上定义bac...

transform-style设置子元素在三维空间或二维平面内设置子元素位于三维空间内，还是在二维平面内。取值： flat：默认值。 指定子元素位于此元素所在平面内 preserve-3d： 指定子元素定位在三维空间内 注意：当为元素定义 transform-style 属性时，其子元素会获得相应效果，而不是元素本身获得该效果。意思是元素要获得transform-st...

perspective产生视觉远近效果属性定义 ：perspective 指定观察者与「z=0」平面（电脑屏幕）的距离，使其具有三维位置变换的元素产生视觉远近效果。「z>0」的三维元素是看不见的，而「z<0」时则比正常小，大小程度由perspective属性的值决定。 Z的值不变的情况下，改变perspective的值，可以改变视觉的远近效果。当然Z(Z轴)是...

transform-origin指定元素变形的基准点定义和用法 ：transform-origin 属性允许您改变被变形元素的起点位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。12345值 描述X轴 定义视图被置于 X 轴的何处。可能的值：Left center right ..px ...

transform的连写一个元素可以使用多种变形方法。按照代码的先后顺序执行变形。 transform:translate(200px,200px) rotate(180deg) scale(1,2) skew(50deg,50deg) rotateX(50deg) rotateY(50deg); -webkit-transform:translate(200px,20...

3D的转换transform旋转transform: rotateX(50deg); 围绕X轴旋转50度-webkit-transform: rotateX(50deg); transform: rotateY(50deg); 围绕Y轴旋转50度-webkit-transform: rotateY(50deg); transfo...

2D的转换transform移动transform:translate(200px,200px); （x轴,y轴）的移动参数-webkit-transform:translate(200px,200px); 支持safari chrome-ms-transform:translate(200px,200...

remrem：是一个相对单位，相对根元素字体大小的单位，直白点就是相对于html元素字体大小的单位。html元素字体大小100px，那么1rem 就100px。 优点：在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。 为什么根元素font-size设置成625%理论上，根元素font...

HTML5自定义属性12345678910111213141516171819<div data-age="18" data-sex="男"></div>通过data- 的方式添加的属性都会保存到DOM元素的dataset属性中。同时dataset也是一个对象。<div data-age="18" data-sex="男"></d...