| **单词 | 说明 | 实例 |
|---|
| transfrom | 变形 | |
| translate | 位移 | transfrom:translate(100px) |
| origin | 原点 | transfrom-origin: right bottom |
| scale | 缩放 | transfrom:scale(1.5) |
| rotate | 旋转 | transfrom:rotate(360deg)** |
| 开门案例: | |
| transform: translate(x,y);位移式例. | |
/*写个盒子装背景图片.*/
`.box {
overflow: hidden;
width: 1366px;
height: 600px;
/* background-color: pink; */
background: url(./images/bg.jpg) no-repeat;
margin: 0 auto;
}`
/*盒子大小根据背景图设定.*/
`.box::after``,``
.box::before {
content: '';
width: 50%;
height: 600px;
/* background-color: pink; */
background: url(./images/fm.jpg) no-repeat;
transition: all .3s;
}`
/*用伪元素插入两个盒子,盒子的宽度是大盒子宽度的一半.*/
`transition: all .3s;`/*过度*/
`.box::before {
float: left;
/* background-color: purple; */
}`
.box::after {
float: right;
background-position: right;
}
/插入的两个盒子左右浮动/
background-position: right;/显示右边的车 让图片靠右上角对齐/
