이미지가 포함된 3D 큐브 상자 CSS 애니메이션
~에 의해점쟁이-2023년 12월 17일0 코멘트
이미지가 포함된 3D 큐브 상자 CSS 애니메이션
귀하의 웹사이트를 더욱 매력적으로 보이게 하려고 하시나요? CSS 3D 이미지 갤러리는 창의적인 포트폴리오, 전자상거래 플랫폼, 교육 웹사이트, 기업 프레젠테이션에 사용되는 중요한 이미지를 시각적으로 표현한 것입니다. CSS(Cascading Style Sheets)의 표현력을 활용하면 이미지가 포함된 아름다운 3D 큐브 상자 CSS 애니메이션을 만들 수 있습니다. 이 인상적인 Cube Box CSS 애니메이션은 모든 웹 사이트에 뛰어난 시각적 차원을 제공합니다. 3D 큐브 효과는 CSS 변환 및 관점 속성을 사용하여 쉽게 얻을 수 있습니다. 오늘 우리는 HTML과 CSS를 사용하여 멋진 CSS 3D 큐브 애니메이션을 만들어 보겠습니다. 아래는 이 스니펫을 기반으로 한 비디오 튜토리얼입니다. 코드를 수집하기 전에 비디오 튜토리얼을 시청하십시오. 그러면 이 코드 조각이 어떻게 작동하는지 알 수 있습니다. 저희 비디오 콘텐츠가 마음에 드신다면 YouTube 채널을 구독하실 수 있습니다.
비디오 튜토리얼:
3D 큐브 이미지 슬라이더 비디오 튜토리얼을 시청하셨기를 바랍니다. 이미지가 포함된 이 3차원 회전 큐브는 청중의 시선을 사로잡을 수 있는 좋은 방법입니다. 이 인상적이고 역동적인 이미지 슬라이더 기능은 웹사이트 이미지를 아름답게 표시하는 동시에 웹페이지에 현대적이고 대화형 터치를 제공합니다.
코드 조각은 <div> '슬라이더'라고 표시되어 있습니다. 그런 다음 또 다른 <div> '래퍼'라고 합니다. 안으로 들어갑니다. 그런 다음 또 다른 <div> 'img-area'라고 합니다. 이 프로젝트에 사용된 4개의 이미지가 보관되어 있는 내부입니다.
녹색 배경 그라데이션을 '슬라이더'의 배경색으로 설정했습니다. 수업. '래퍼'를 사용하면 클래스에서는 프로젝트의 관점과 차원을 정의합니다. <div> 이름이 'img-area'입니다. 스니펫의 3D 변환을 처리합니다. 모든 이미지에는 절대 위치가 지정되고 CSS 변환 속성을 사용하여 조작되어 3D 큐브 효과를 만듭니다. 또한 :nth-child() 선택기를 사용하여 각 이미지가 Y축을 따라 다른 각도로 회전하도록 했습니다. @keyframes 규칙은 여기서 사용한 사진에 대한 애니메이션 시퀀스를 생성합니다. 또한 Y축을 따라 회전할 때 부드러운 전환을 만듭니다.
당신은 또한 좋아할 수도 있습니다:
눈은 마우스 커서 애니메이션을 따릅니다.
페이지 스크롤에서 이미지 확대/축소
CSS 그리드를 사용한 반응형 이미지 갤러리
이미지가 포함된 3D 큐브 상자 CSS 애니메이션 [ 소스 코드 ]:
이 '3D 큐브 상자 CSS 애니메이션'을 만들려면; 먼저 HTML과 CSS 파일을 만들어야 합니다. 필요한 파일을 생성한 후 코드 블록에서 다음 코드를 가져와 프로젝트에 붙여넣어야 합니다. 필요한 경우 아래 다운로드 버튼을 통해 코드를 다운로드할 수도 있습니다.
HTML 추가:
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
<meta charset="UTF-8">
<title>3d cube animation using html css</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="slider">
<div class="wrapper">
<div class="img-area">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
</div>
</div>
</body>
</html>
복사
CSS를 추가하세요:
* {
margin: 0;
padding: 0;
}
.slider {
background: linear-gradient(to right, #1b6c57, #09513d);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper {
width: 300px;
height: 300px;
perspective: 1000px;
}
.img-area {
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
animation: animate 16s infinite;
}
.img-area img {
position: absolute;
width: 300px;
height: 300px;
}
.img-area img:nth-child(1) {
transform: rotateY(0) translateZ(150px);
}
.img-area img:nth-child(2) {
transform: rotateY(90deg) translateZ(150px);
}
.img-area img:nth-child(3) {
transform: rotateY(-90deg) translateZ(150px);
}
.img-area img:nth-child(4) {
transform: rotateY(180deg) translateZ(150px);
}
@keyframes animate {
0% {
transform: rotateY(0deg);
}
25% {
transform: rotateY(90deg);
}
50% {
transform: rotateY(180deg);
}
75% {
transform: rotateY(270deg);
}
100% {
transform: rotateY(360deg);
}
}
복사
이 것이 마지막이다! 이 튜토리얼이 HTML과 CSS를 사용하여 이미지로 3D 큐브 애니메이션을 만드는 데 도움이 되었기를 바랍니다. 우리 웹사이트에는 150개 이상의 스니펫이 있습니다. 이를 얻기 위해 해야 할 일은 홈페이지 하단에 있는 더 보기 버튼을 누르는 것뿐입니다. 귀하에게 도움이 될 수 있는 내용을 찾으시기 바랍니다. 저희 웹사이트를 방문해 주셔서 감사합니다.
index_html
HTML tag
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
<meta charset="UTF-8">
<title>3d cube animation using html css</title>
<link href="style.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
.slider {
background: linear-gradient(to right, #1b6c57, #09513d);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper {
width: 300px;
height: 300px;
perspective: 1000px;
}
.img-area {
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
animation: animate 16s infinite;
}
.img-area img {
position: absolute;
width: 300px;
height: 300px;
}
.img-area img:nth-child(1) {
transform: rotateY(0) translateZ(150px);
}
.img-area img:nth-child(2) {
transform: rotateY(90deg) translateZ(150px);
}
.img-area img:nth-child(3) {
transform: rotateY(-90deg) translateZ(150px);
}
.img-area img:nth-child(4) {
transform: rotateY(180deg) translateZ(150px);
}
@keyframes animate {
0% {
transform: rotateY(0deg);
}
25% {
transform: rotateY(90deg);
}
50% {
transform: rotateY(180deg);
}
75% {
transform: rotateY(270deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="slider">
<div class="wrapper">
<div class="img-area">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
</div>
</div>
</body>
</html>