지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

css3D+ 애니메이션의 예(완전한 코드 포함)

不言
풀어 주다： 2018-08-13 11:06:44
원래의
7079명이 탐색했습니다.

이 기사는 CSS3D+ 애니메이션의 예를 제공합니다(완전한 코드 첨부). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Preface

최근에 CSS를 사용하여 3D 효과를 구현하고 여러 데모를 작성했기 때문에 이 블로그에 요약하겠습니다. 이 블로그를 읽기 전에 먼저 변환 스타일, 변환 원본, 변환, 관점과 같은 CSS 3D의 속성을 이해하십시오.

간단한 큐브 작성

1 먼저 CSS를 사용하여 직육면체를 6개로 작성하고 ul을 사용합니다. 3D 애니메이션 작성 경험에 따르면 

<p>
    </p>
로그인 후 복사
            
  • 1
    •         
  • 2
    •         
  • 3
    •         
  • 4
    •         
  • 5
    •         
  • 6
    •     

2를 감싸는 것이 가장 좋습니다. 먼저 너비와 높이를 .parent로 설정합니다. 시청 거리와 기준점 위치를 설정합니다. 

.parent{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            perspective: 2000px;
            perspective-origin: -40% -80%;
            background: #000;
        }
로그인 후 복사

3 하위 요소의 3D 변환을 유지하도록 ul의 너비, 높이 및 3D 보존 속성을 설정하고 모든 하위 요소 li는 절대적으로 적용됩니다. positioned 

        ul{
            width: 50px;
            position: relative;
            margin: 100px auto;
            transform-style : preserve-3d;
        }
         li{
            width: 100px;
            height: 100px;
            background:  rgba(255, 255, 0, 0.3);
            position: absolute;
            text-align: center;           
            border: 3px solid greenyellow;
        }
로그인 후 복사

효과는 아래와 같습니다:

css3D+ 애니메이션의 예(완전한 코드 포함)

# 🎜🎜#4. 먼저 얼굴을 쓰고 배경 설정 배경을 지정합니다: rgba(255, 255, 0, 0.3);

 li:nth-child(1){
            background:  rgba(255, 255, 0, 0.3);
            transform:  translateY(50px) rotateX(90deg);
        }
로그인 후 복사
효과는 아래와 같습니다: #🎜🎜 #

#🎜 🎜#

css3D+ 애니메이션의 예(완전한 코드 포함)5 다음과 같이 나머지 6개의 얼굴을 조정합니다. 아래 그림. 여기서는 회전 방향에 대해 설명하지 않습니다. 이해하지 못하는 친구는 다른 문서를 직접 확인할 수 있습니다. 

        /*上面*/
         li:nth-child(1){
            transform: translateY(-50px) rotateX(90deg);
        } 
        /*下面*/
        li:nth-child(2){
        
            transform:  translateY(50px) rotateX(90deg);
        }
        /*左面*/
        li:nth-child(3){
            transform: translateX(-50px) rotateY(90deg);
        }
        /*右面*/
        li:nth-child(4){
            transform: translateX(50px) rotateY(90deg);
        }
        /*前面*/
        li:nth-child(5){
            transform: translateZ(50px);
        }
        /*后面*/
        li:nth-child(6){
            transform: translateZ(-50px);
        }
로그인 후 복사
효과는 아래와 같습니다:

css3D+ 애니메이션의 예(완전한 코드 포함)다음 두 개의 CSS3D+애니메이션 효과

1입니다. 코드는 다음과 같습니다. 

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>书页2</title>
    <style>
        .container{
            width: 1000px;
            height: 650px;
            background: #000;
            perspective: 2000px;
            border: 1px solid transparent;
            overflow: hidden;
            margin: 0 auto;
            perspective-origin: 10% 20%;
           
        }
    
        .cube{
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            margin:100px auto;
            
            position: relative;
            transform: rotateX(30deg);
            border-radius: 50%;
            padding: 60px;
        }
        .mian{
            width: 200px;
            height: 300px;
            background-image: url(1.jpg);
            background-position:400px 0;
            position: absolute;
           
            border: 1px solid #ccc;
            transition: 2s;
        }
        /* .mian1:hover{
            transform-origin: right;
            transform: rotateY(-60deg);
        } */
        .mian1{
            transform-origin: right;
            transform: translateX(-200px) rotateY(45deg);
            background-position: 0 0;
        }
        .mian3{
            transform-origin: left;
            transform: translateX(200px) rotateY(45deg);
            background-position: 200px 0;
        }
        .mian3:hover{
            transform: translateX(200px) rotateY(0deg);
        } 
        .mian1:hover{
            transform: translateX(-200px) rotateY(0deg);
        }
    </style>


    <p>
        </p><p>
            </p><p></p>
            <p></p>
            <p></p>
        
    
로그인 후 복사

2. 다음: #🎜 🎜#

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>立方体</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .parent{
            width: 1000px;
            margin:  0 auto;
            height: 600px;
            background: black;
            perspective: 5000px;
            perspective-origin: -40% -120%;
            border: 1px solid #000;
        }
        ul{
            width: 100px;
            height: 300px;
            position: relative;
            margin:100px auto;
            transform-style: preserve-3d;
            animation: zuan 3s linear infinite;
            border: 1px solid greenyellow;
        }

        li{
            width: 100px;
            height: 300px;
            background:  rgba(0, 0, 0, 0.5);
            position: absolute;
            text-align: center;
            line-height: 100px;
            
            border: 3px solid greenyellow;
        }
        li:nth-child(1){
            transform: rotateY(30deg) translateZ(-200px);
      
        }
        li:nth-child(2){
            transform: rotateY(60deg) translateZ(-200px);
            background:  rgba(255, 0, 0, 0.5);
        }
        li:nth-child(3){
            transform: rotateY(90deg) translateZ(-200px);
            
        }
        li:nth-child(4){
            transform: rotateY(120deg) translateZ(-200px);
            background:  rgba(0, 0, 255, 0.5);
        }
        li:nth-child(5){
            transform: rotateY(150deg) translateZ(-200px);
            
        }
        li:nth-child(6){
            transform: rotateY(180deg) translateZ(-200px);
            background:  rgba(255, 0, 255, 0.5);
        }
        li:nth-child(7){
            transform: rotateY(210deg) translateZ(-200px);
      
        }
        li:nth-child(8){
            transform: rotateY(240deg) translateZ(-200px);
            background:  rgba(0, 255, 0, 0.5);
        }
        li:nth-child(9){
            transform: rotateY(270deg) translateZ(-200px);
      
        }
        li:nth-child(10){
            transform: rotateY(300deg) translateZ(-200px);
            background:  rgba(0, 255, 255, 0.5);
        }
        li:nth-child(11){
            transform: rotateY(330deg) translateZ(-200px);
      
        }
        li:nth-child(12){
            transform: rotateY(360deg) translateZ(-200px);
            background:  rgba(255, 255, 255, 0.5);
        }

        @keyframes zuan{
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
    
    </style>



    <p>
        </p>
로그인 후 복사
                     
  •             
  •             
  •             
  •             
  •             
  •             
  •             
  •             
  •             
  •             
  •             
  •         
          효과는 다음과 같습니다:

관련 권장사항: css3D+ 애니메이션의 예(완전한 코드 포함) 웹페이지가 로드될 때 CSS 스타일 효과를 구현하는 방법은 무엇인가요? (다양한 스타일 예시)

순수한 CSS를 사용하여 웃고 명상하는 작은 스님을 구현하는 방법

글꼴 CSS 속성을 사용하여 그림자 효과를 추가하는 방법은 무엇입니까? (코드 데모)

위 내용은 css3D+ 애니메이션의 예(완전한 코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css html
원천：php.cn
이전 기사：BootStrap의 동적 모달 상자 및 정적 모달 상자의 코드 구현 다음 기사：CSS 텍스트의 스크롤 효과를 오른쪽에서 왼쪽으로 얻는 방법은 무엇입니까? (코드 예)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿