search on the google 'transform mdn'
<head>
<style>
img {
border: 5px solid black;
border-radius: 45px;
transform: translateX(30px) translateY(30px);
}
</style>
</head>
<body>
<img src="img/logo.jpg" />
</body>
add
<body>
<span>Java Script</span>
</body>
Image is on top of text. Transformation doesn't modify box elements. It doesn't apply margin, padding.
The span thinks that image still is where it should be. So the span doesn't aware that the image has been moved.
<style>
img {
border: 5px solid black;
border-radius: 45px;
transform: translateX(100px) translateY(100px);
transition: transform 3s ease-in-out;
}
img:hover {
transform: rotate(360deg);
}
</style>
<style>
img {
border: 5px solid black;
border-radius: 45px;
transition: transform 3s ease-in-out;
}
img:hover {
transform: rotateZ(360deg) scale(0.3);
}
</style>
<style>
img {
border: 5px solid black;
border-radius: 45px;
transition: transform 2s ease-in-out;
}
img:hover {
transform: matrix(6, 5, 4, 3, 2, 1);
}
</style>
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: animation 2 (0) | 2021.05.06 |
|---|---|
| KokoaTalk Clone Coding: animations 1 (0) | 2021.05.06 |
| KokoaTalk Clone Coding: transitions (0) | 2021.05.05 |
| KokoaTalk Clone Coding: colors and variables (0) | 2021.05.05 |
| KokoaTalk Clone Coding: pseudo selector (0) | 2021.05.05 |
