==== transition - transform ====
****HTML
<div class="disnews">Nội dung hơn 5 dòng </div>
****CSS
.disnews {
display: flex;
width: 100%;
padding: .75rem;
border: 1px solid #d9d9d9;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 1px 1px rgba(0, 0, 0, .23);
height: 100%;
transition: .3s ease;
margin-bottom: 30px;
}
.disnews:hover {
transform: translateY(-.5rem);
}
**** JS
$(".blog-macdep").on( "click", function() {
$(".blog-macdep").toggleClass("is-active");
});
**** HTML
<div class="blog-macdep posR is-active">
Mặc đẹp
</div>
**** CSS
.blog-macdep.is-active:after{
transform: rotate(180deg);
}
.blog-macdep:after{
position: absolute;
content: "";
top: 12px;
right: 14px;
width: 0;
height: 0;
border: 10px solid transparent;
background-image: url(../images/select.svg);
background-repeat: no-repeat;
background-size: 12px;
background-position: 50%;
transition: all .3s;
}
**** STEP 2
.css{
transform: translate(0, -50%)
}
**** HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
****CSS* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(200px, 200px);
}Link: Xem tại đây