π Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ 3D-Π±Π°Π½ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS
Π ΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ 3D-Π±Π°Π½ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΠ°ΠΌΠΎΠΌΡ ΠΏΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΡΠΊΠ°ΡΠ°ΡΡ Π°ΡΡ ΠΈΠ² Ρ Π³ΠΎΡΠΎΠ²ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅.. ΠΡΠ»ΠΈ ΡΡΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ, ΠΎΡΡΠ°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΌΡΡΠ»ΡΠΌΠΈ ΠΈΠ»ΠΈ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌΠΈ. ΠΠ°ΡΠΈ ΠΎΡΠ·ΡΠ²Ρ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
Π Π°ΡΡ ΠΈΠ²Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ:
- ΠΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ,Β
- ΠΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ HTML,Β
- ΠΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ CSS,Β
- ΠΠΊΠΎΠ½ΠΊΠΈ ΡΡΠΈΡΡΠΎΠ²,Β
- Π€Π°ΠΉΠ»Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²,Β
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡΒ
- Firefox,Β
- Safari,Β
- Edge,Β
- Opera,Β
- Chrome,Β
- Yandex,
HTML ΠΠΠ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Can Rotation Effect - CSS</title>
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="can">
<div class="can-img" style="--img: url(images/coke-img.jpeg)"></div>
<div class="can-img" style="--img: url(images/pepsi-img.jpg)"></div>
</div>
</body>
</html>CSS ΠΠΠ:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
background: -webkit-gradient(linear,
left top, right top,
from(#444),
color-stop(50%, #000),
to(#444));
background: -o-linear-gradient(left,
#444 0%,
#000 50%,
#444 100%);
background: linear-gradient(90deg,
#444 0%,
#000 50%,
#444 100%);
overflow: hidden;
}
.can {
position: absolute;
width: 300px;
height: 500px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
--left: 230px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.can .can-img {
position: absolute;
width: 250px;
background: var(--img) var(--left),
url(images/can-img.png);
background-size: auto 100%;
aspect-ratio: 2/4;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-blend-mode: multiply;
-webkit-mask-image: url(images/can-img.png);
mask-image: url(images/can-img.png);
-webkit-mask-size: auto 100%;
mask-size: auto 100%;
-webkit-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
}
.can:hover .can-img {
-webkit-transform: translate(-50%, -20%);
-ms-transform: translate(-50%, -20%);
transform: translate(-50%, -20%);
--left: -1000px;
}
.can .can-img:nth-child(2) {
opacity: 0;
}
.can:hover .can-img:nth-child(2) {
opacity: 1;
}
