3D变换 transform3D

主要涉及到的属性有transform-origin , transform , transform-style , perspective , perspective-origin , backface-visibility

transform-style: preserve-3d;

开启3D

坐标轴

x左边是负的，右边是正的 y 上面是负的，下面是正的 z 里面是负的，外面是正的

透视(perspective)

近小远大的原理

设置给父元素,作用于所有3D转换的子元素

translateX

仅水平方向移动

translateY

仅垂直方向移动

translateZ(z)

直观表现就是大小的变化

参照物就是perspective属性

translate3d(x,y,z)

注意其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

perspective

设置3D空间的景深,也就是Z轴的深度,perspective属性只影响3D转换元素

作为z 的参照物

perspective-origin

视角,默认情况下Z轴位于父元素的水平中线与垂直中线的交界处

使用绝对定位样式移动元素时, 此时坐标系的X轴和Y轴以设置了相对定位的祖先元素的中点为原点

backface-visibility （了解)

backface-visibility 属性定义当元素不面向屏幕时是否可见

visible和hidden

visibility

控制一个元素是否可见

visibility: visible(默认)|hidden

visibility具有继承性
visibility: hidden; 不会影响计数器的计数
CSS3的transition支持visibility属性,但不支持display,由于transition可以设置延迟,因此可以配合 visibility使用纯css实现hover延时显示效果。提高用户体验。
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

表单验证

注意点:

但表单有input的type为file时,需要给form在属性enctype,取值为multipart/form-data

基本表单验证特性

palceholder 规定可描述输入的简短提示信息
required 规定为必填信息
autofocus 刷新时自动聚焦
novalidate form属性,不认证提交，如认证必填信息是否已经填写（required）
formnovalidate input属性，不认证提交，默认的值的认证提交
pattern 写正则，规定用于验证元素的值的正则表达式
autocomplete 规定是否启用自动完成功能，自动完成允许浏览器预测对字段的输入——基于之前键入的值
```
autocomplete = "on|off"
```
list input 属性, 输入后可提示dataList中的可补全的值

dataList form中的标签，指定list中的值

例:

<input type="text" list="tips">
<dataList id="tips">
    <option value="apple"></option>
    <option value="add"></option>
    <option value="abandon"></option>
    <option value="action"></option>
</dataList>

【前端三剑客——CSS】3D转换及表单验证