HTML CSS와 자바스크립트를 사용한 이미지 캐러셀 회전 환상-JS 튜토리얼-php.cn

HTML CSS와 자바스크립트를 사용한 이미지 캐러셀 회전 환상

Mary-Kate Olsen

풀어 주다： 2024-11-07 14:05:03

원래의

414명이 탐색했습니다.

Image carousel rotation illusion using html css and javascript

암호

<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>회전하는 이미지 캐러셀</title>
<스타일>
    몸 {
        디스플레이: 플렉스;
        내용 정당화: 센터;
        항목 정렬: 중앙;
        높이: 100vh;
        여백: 0;
        배경색: #0d0d0d;
        오버플로: 숨김;
        전환: 배경 이미지 0.5초 용이성;
        배경 크기: 표지;
        배경 위치: 중앙;

    }

    /* 캐러셀 컨테이너 */
    .캐러셀 {
        위치: 상대;
        너비: 130px;
        높이: 130px;
        변환 스타일: 보존-3D;
        원근감: 1000px;
        전환: 1을 변환합니다.
    }

    /* 이미지 스타일 */
    .carousel img {
        위치: 절대;
        높이: 100%;
        너비: 100%;
        /* 너비: 150px;
        높이: 150px; */
        테두리 반경: 10px;
        상자 그림자: 0 0 10px rgba(255, 110, 199, 0.3);
        변형원점: 중심;
        전환: 0.5초 변환, 0.5초 필터링;
        불투명도: 0.8;
    }

    /* 각 이미지를 Y축 주위에 배치 */
    .carousel img:nth-child(1) { 변환:rotateY(0deg)translateZ(150px); }
    .carousel img:nth-child(2) { 변환:rotateY(72deg)translateZ(150px); }
    .carousel img:nth-child(3) { 변환:rotateY(144deg)translateZ(150px); }
    .carousel img:nth-child(4) { 변환:rotateY(216deg)translateZ(150px); }
    .carousel img:nth-child(5) { 변환:rotateY(288deg)translateZ(150px); }

    /* 컨트롤 아이콘 */
    .controls {
        위치: 절대;
        하단: 20px;
        왼쪽: 20px;
        디스플레이: 플렉스;
        간격: 10px;
    }
    .controls 버튼 {
        너비: 40px;
        높이: 40px;
        글꼴 크기: 18px;
        테두리: 없음;
        배경색: #181616;
        색상: #fff;
        커서: 포인터;
        테두리 반경: 50%;
        전환: 배경색 0.3초;
    }
    .controls 버튼:호버 {
        배경색: #555;
    }
</스타일>
</머리>
<본문>

<div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용한 이미지 캐러셀 회전 환상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!