CSS精灵技术

标签：rev   设置   dde   lex   -o   原理   tps   code   font   transition：要过渡的属性 花费时间 运动曲线 何时开始 如 transition: width  0.5s  ease-in  0s(立马开始的意思); 写到所需要的标签上，不写到hover里 如果想要所有属性都变化用all       transform：translate（100px或者50%）； 是以自己盒子的宽度为准进行移动 如 div{ width：300px； } transform：translate（50%）； 只移动150px；   设置变形中心的点 transform-origin：center center；默认中心点 2D transform：rotate（360deg）；旋转360度； 可以写在鼠标经过的时候（做翻转效果） 3D transform：rotateX（360deg）；X轴旋转360度； transform：rotateY（360deg）；Y轴旋转360度； transform：rotateZ（360deg）；Z轴旋转360度；   透视效果（perspective）近大远小的原理，眼睛到屏幕的距离 perspective：1000px；视距越大，效果越不明显     translate3d transform:translate3d(100px,100px,300px); backface-visibility:hidden; 没有正面面对屏幕，就隐藏。用于翻转图片之类 如果有多组变形   都属于transform 如51%{ transform: translate3d(1000px,0,0) rotateY(180deg）; }   CSS3伸缩布局 display:flex;  伸缩布局模式 min-width:300px;   缩小网页到300px时，则不参与伸缩分配，目的保护盒子不被积压，响应式 max-width:1300px;   放大网页到1300px时，则不参与伸缩分配，目的保护盒子不被积压，响应式   给父盒子定义排列 flex-direction: column; 让分布的盒子竖着排列 flex-direction: row-reverse;盒子水平翻转排列    案例——携程网布局应用  https://www.cnblogs.com/hxiaoman/p/14874330.html  CSS精灵技术标签：rev   设置   dde   lex   -o   原理   tps   code   font   原文地址：https://www.cnblogs.com/hxiaoman/p/14865913.html