css3 和 html5知识点 笔记

1、给为元素动态获取内容

　　content: attr(data-content); 

　　data-content是某元素的属性

2、rotate（顺时针： + ， 逆时针： -）

　　rotateX : 绕着X轴旋转；

　　rotateY ： 绕着Y轴旋转；

　　rotateZ : 绕着Z轴旋转；

　　perspective属性用来设置观点，在css3模型中，视点是自Z轴所在的方向上

3、translate

　　translateX ： 屏幕上左右移动；向右移动 +

　　translateY ： 屏幕上上下移动 ； 向下移动 +

　　trsformZ:  直观形式就是大小的变化，实质上就是相对与十点的远近变化，

　　　　比如： 设置perspective为200px,那么trsformZ的值越接近200，就是离得越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了

　　如果是设置3d正方体的话，一般宽度200px的话。设置其内容transform: translateZ(100px);但是后面的那一面需要设置transform: translate(-100px);左右和上下的旋转各一正一负。

 4、flex子元素超出换行

　　在flex设置中，如果要设置子元素超出换行的话，并且要设置子元素的宽度的话，通过一下的设置就可以实现

　　比如： 设置宽度为25%

flex: 1 1 25%;