3D动画
透视:perspective:像素{指距离,人与平面之间的距离,}
父盒子:perspective:200px
子盒子:.xxx:hover img{
transform:rotateZ(360deg)[可以有rotate(x,y,z)和translate(x,y,z)]
}
让盒子背面隐藏:backface-visibility:hidden;
倾斜:skew(deg,deg)
3D效果:transform-style:preserve-3d;(preserve-3d使子盒子保持3D效果。flat使子盒子扁平化)
动画效果“滚”
@keyframes gun{
from{transform: rotateX(0deg) rotateY(100%deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
z -index定位层数,一般同级标签才会使用使用数字来表示值,数字越高层数就在上
column-count分几列,实现的效果想报纸分栏一样,把一大段分成块,便于阅读,兼容性可能不是很好,如果不能实现效果请添加-webkit-等兼容前缀
column-rule分割线和border的属性一样
column-gap设置列与列之间的间距
column-width设置列的宽度
column-span一般用于设置标题夸列
本文属于学习笔记,不做其他用途