css3第三天

速记

3d透视

perspective:体现近大远小的效果，必须设置在其父盒子里，而且要设置在其直接上级盒子里，不然没有效果
transform-style:preserve-3d;//体现立体感，相当于3D眼睛的效果，必须给父盒子设置，而且要设置在其直接上级盒子里，子元素才会看到效果
每个盒子都有一个自己的坐标系
这里有一个问题，就是写出来的立方体感觉不好，我觉得应该是transform-oringe的问题
translatedZ:近大远小，这个属性很实用
backface-visibility:hidden;设置背面可不可见，这个属性具体的作用没有实验出来
泪崩中/(ㄒoㄒ)/~~

3D工具的使用

透视

动画

//animation-name:
//animation-duration:
//animation-iteration-count:infinite;//循环的次数
//animation-fill-mode:forward//动画播放完以后的状态
//animation-direction:alternate//设置动画逆向播放
animation-play-state:paused;//running暂停
//animation-timing-function:ease;//播放速度
animation:action 10s linear forwards;
//动画序列   
*//
@keyframes action {
    0% {

    }
    100% {

    }
}
@keyframes action {
    from {

    }
    to {

    }
}

//学习工具
isux.tencent.com
animate.css

背景

background-size:600px 400px;
background-size:100% 100%;
background-size:cover;//背景图片铺满盒子
background-size:contain;//保证图片完整显示

//满屏
html,body{
    //width:100%;
    height:100%;
}
.pic {

}

background-origin:padding-box;
background-origin:content-box;
background-origin:border-box;

背景区域是包含border的
background-clip:padiing-box;
background-clip:border-box;
background-clip:content-box;//背景只有内容区域的大小
//多重背景

伸缩布局

解决块级元素在水平和垂直上的布局方式
给父盒子设置伸缩盒子

display:flex;//一行显示
justify-content:space-between;//两端对齐

三个概念
主轴和侧轴、方向

//调整主轴方向
flex-derection:row;//column、row-reverse(反转)、column-reverse

//调整主轴的对齐方式（赋给父元素）
justify-content：flex-start;
justify-content：flex-end;
justify-content：flex-center;
//空白区域将子元素环绕
justify-content：space-around;
justify-content：space-between;//空白放两个元素之间

//调整侧轴对齐方式
align-items:flex-end;//center、start
align-items:stretch;//拉伸(高度不能写死)

//控制是否换行
flex-wrap:nowrap;//不换行
flex-wrap:wrap;//换行

//换行以后,行之间的调整
align-content:flex-start;//center、end、space-around、space-between、stretch

以上都是对父元素设置的

flex是针对子元素的

//宽度始终维持这个比例关系
.father li:nth-child(1){flex:1;}
.father li:nth-child(2){flex:2;}
.father li:nth-child(3){flex:1;}
//flex分的是剩余空间

align-self:同align-item,可以覆盖父元素的align-items

//order

自适应

ps:没有写完，偷了点懒，找时间补上