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%;
原文地址:https://www.cnblogs.com/qzccl/p/6812687.html