html鼠标经过图片轻微左移,CSS——鼠标滑过放大/左移

鼠标滑过放大/左移

*{

margin: 0;

padding: 0;

}

li{

list-style: none;

}

.show-big,.show-left{

height: 200px;

width: 650px;

margin: 0 auto;

}

.show-big ul,.show-left ul{

width: 100%;

height: 150px;

}

.show-big ul li,.show-left ul li{

float: left;

width: 100px;

border: 1px solid #ff5400;

padding: 4px;

margin: 1%;

cursor: pointer;

transition: all 0.6s;

}

.show-big ul li img,.show-left ul li img{

width: 100px;

}

.show-big ul li:hover{

transform: scale(1.4);

}

.show-left ul li{

transition: 0.3s all ease;

}

.show-left ul li:hover{

-webkit-transform: translate(-10px, 0);

-moz-transform: translate(-10px, 0);

transform: translate(-10px, 0);

}

• 
• 
• 
• 
• 

• 
• 
• 
• 
•