찾다
웹 프론트엔드CSS 튜토리얼간단한 3D 행성 모션 효과 예제 코드를 생성하는 CSS3와 JS

이 글에서는 간단한 3D 행성 모션 효과 예제 코드를 만들기 위한 CSS3 plus js를 주로 소개합니다. 효과가 매우 멋지네요.

얼마 전 정원에서 CSS3D 행성의 움직임에 대한 기사를 보고 이 효과가 너무 멋있다고 생각해서 무심코 사용해 보았습니다. 플러그인을 사용하기에는 너무 게으른 관계로 네이티브 JS로 작성하여 효과가 다소 거칠고, 잘 처리되지 않은 부분이 있었으면 좋은 제안이 있으면 메시지를 남겨주세요. 알려주세요. 정말 감사합니다. 좋아요, 더 이상 고민하지 말고 코드가 아래에 첨부되어 있습니다.

HTML 부분

<p>
        </p><p>
            </p><p></p>  
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>

            <p></p>
            <p></p>
            <p></p>

            <p></p>
            <p></p>
            <p></p>
    
            <!-- 卫星 -->
            <p>
                </p><p>
                    </p><p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>

                    <p></p>
                    <p></p>
                    <p></p>

                    <p></p>
                    <p></p>
                    <p></p>
                
            
        
    

여기서는 p의 처음 세 가지 범주를 사용하여 각 행성의 x, y 및 z를 그립니다. y축과 z축이며, 이들 행성은 중첩될 수 있습니다. 즉, 위의 코드와 같이 내부 행성은 외부 행성의 위성입니다.

css 부분

.path-Saturn, .path-earth, .path-Venus, .path-Neptune, .path-Jupiter, .path-Mercury, .path-satellite, .path-moon{
    position: absolute;
    width: 95%;
    height: 95%;
    top: 2.5%;
    left: 2.5%;
    border: 1px solid #ddd;
    border-radius: 50%;
    transform: rotateX(60deg);
    transform-style: preserve-3d;
}
#sun, #earth, #Saturn, #Venus, #Neptune, #Jupiter, #Mercury, #satellite, #moon{
    width: 160px;
    height: 160px;
    position: absolute;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -80px;
    animation: rotateForward 10s linear infinite;
    cursor: pointer;
    transform: translateZ(-80px);
}
/*x, y, z轴*/
.x, .y, .z{  
    position: absolute;
    height: 100%;
    border: 1px solid #999;
    left: 50%;
    margin-left: -1px;
}
.y{
    transform: rotateZ(90deg);
}
.z{
    transform: rotateX(90deg);
}
@keyframes  rotateForward {
    0%{
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100%{
        transform: rotate3d(1, 1, 1, -360deg);
    }
}
/*Saturn*/
#Saturn{
    width: 80px;
    height: 80px;
    left: 0%;
    margin: -40px 0 0 -40px;
    animation: rotateForward 4s linear infinite;
    transform: translateZ(-40px);
}
#Saturn .space{
    width: 80px;
    height: 80px;
    box-shadow: 0 0 60px rgba(90, 80, 53, 1);
    background-color: rgba(90, 80, 53, .3);
}
#Saturn .space-x1, #Saturn .space-x2, #Saturn .space-y1, #Saturn .space-y2, #Saturn .space-z1, #Saturn .space-z2{
    width: 87.5%;
    height: 87.5%;
    top: 6.25%;
    left: 6.25%;
    transform: rotate3d(0, 0, 0, 0deg) translateZ(20px);
}
#Saturn .space-x1{
    transform: rotate3d(0, 0, 0, 0deg) translateZ(-20px);
}
#Saturn .space-y{
    transform: rotate3d(0, 1, 0, 90deg) translateZ(0px);
}
#Saturn .space-y1{
    transform: rotate3d(0, 1, 0, 90deg) translateZ(-20px);
}
#Saturn .space-y2{
    transform: rotate3d(0, 1, 0, 90deg) translateZ(20px);
}
#Saturn .space-z{
    transform: rotate3d(1, 0, 0, 90deg) translateZ(0px);
}
#Saturn .space-z1{
    transform: rotate3d(1, 0, 0, 90deg) translateZ(-20px);
}
#Saturn .space-z2{
    transform: rotate3d(1, 0, 0, 90deg) translateZ(20px);
}

주로 9개의 면을 사용하여 다양한 회전과 번역을 통해 구를 구성합니다. 그리고 여기에는 호환코드가 적혀있지 않기 때문에 소스코드를 다운로드 받고 싶은 친구들은 크롬 브라우저로 열어보도록 하세요. 여기에 언급해야 할 몇 가지 CSS3 속성이 있습니다:

1. 변환 스타일: 보존-3d는 3D 효과에서 이 속성이 설정된 컨테이너의 하위 요소를 표시하는 데 사용됩니다.

2. 변환 원점: 회전된 요소의 회전 및 이동의 기준점 위치를 설정합니다.

3. 관점: 요소가 보이는 뷰를 설정합니다.

JS파트

(function(planetObj, TimeArr, judgeDirec) {
    //检测参数是否规范
    var timeRegexp = /^[1-9][0-9]*$/,
        direcRegexp = /^[01]$/;
    function checkArgs (arg, ele, regexp) {
        if(arg){
            $(arg).each(function (i, item) {
                if(arg.length != planetObj.length || !regexp.test(item)){
                    throw Error('an error occured');
                    return;
                }else{
                    return arg;
                }
            })
        }else{
            arg = [];
            for(var i = 0; i <p></p><p>플래닛 무브먼트를 구현할 때 잘 처리되지 않는 곳도 있는데, Let the 일정 시간 동안 행성의 왼쪽 위치가 변경된 후 타원 공식에 따라 상단의 값을 계산합니다. 타원이 고르지 않기 때문에 최고 값이 고르지 않게 변하기 때문에 행성의 움직임이 빠르고 느리게 보이게 됩니다. </p><p> 그리고 여기서 또 주목해야 할 것이 있는데, 바로 Math.sqrt() 메소드로 추출한 값이 모두 양수인데, 행성이 원을 그리려면 궤적의 왼쪽과 오른쪽 끝을 동적으로 조정해야 합니다. Math.sqrt() 메서드에서 생성된 값의 양수와 음수를 변경합니다. </p><p>아래에 렌더링 첨부</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/013/76e74c3adf658959e8d478e32a10501b-0.png?x-oss-process=image/resize,p_40" class="lazy" alt="간단한 3D 행성 모션 효과 예제 코드를 생성하는 CSS3와 JS"    style="max-width:90%"  style="max-width:90%" title="간단한 3D 행성 모션 효과 예제 코드를 생성하는 CSS3와 JS"></p><p>위 내용은 모두의 학습에 도움이 되기를 바라며, 모두에게 도움이 되기를 바랍니다. PHP를 지원합니다. </p><p>간단한 3D 행성 모션 효과 예제 코드를 만들기 위한 CSS3 및 js 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요! </p>
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례Mar 08, 2025 am 09:45 AM

이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Mar 07, 2025 am 11:33 AM

이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

WordPress 블록 및 요소에 상자 그림자를 추가합니다WordPress 블록 및 요소에 상자 그림자를 추가합니다Mar 09, 2025 pm 12:53 PM

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

내용 부호 ​​속성으로 인라인 텍스트 편집기를 만듭니다내용 부호 ​​속성으로 인라인 텍스트 편집기를 만듭니다Mar 02, 2025 am 09:03 AM

인라인 텍스트 편집기를 구축하는 것은 사소한 일이 아닙니다. 이 프로세스는 대상 요소를 편집 가능하게하여 잠재적 구문 예외를 처리하여 시작합니다. 편집자 생성 이 편집기를 구축하려면 컨텐츠를 동적으로 수정해야합니다.

GraphQL 캐싱 작업GraphQL 캐싱 작업Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

첫 번째 맞춤형 전환을 만듭니다첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교Mar 04, 2025 am 10:22 AM

이 기사는 Envato Market에서 사용할 수있는 최고의 PHP 양식 빌더 스크립트를 탐색하여 기능, 유연성 및 설계를 비교합니다. 특정 옵션으로 다이빙하기 전에 PHP 양식 빌더가 무엇인지, 왜 사용하는지 이해해 봅시다. PHP 양식

node.js 및 Express의 Multer와 함께 파일 업로드node.js 및 Express의 Multer와 함께 파일 업로드Mar 02, 2025 am 09:15 AM

이 튜토리얼은 node.js, express 및 multer를 사용하여 파일 업로드 시스템을 구축함으로써 안내합니다. 단일 및 다중 파일 업로드를 다루고 나중에 검색하기 위해 MongoDB 데이터베이스에 이미지 저장을 보여줍니다. 먼저 Projec을 설정하십시오

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전