이번에는 CSS3를 사용하여 3D 입체 특수 효과를 얻는 방법을 보여 드리겠습니다. CSS3를 사용하여 3D 입체 특수 효과를 얻을 때 주의 사항은 무엇입니까?
실제로 CSS3는 매우 멋진 것들을 구현할 수 있는 많은 도구를 제공합니다. 많은 특수 효과는 복잡한 js 코드를 통해 구현될 필요가 없지만, 이번에는 간단한 css3 코드를 통해 구현될 수 있습니다. 3D박스의 실현과 애니메이션의 실현.
이 합법적인 상자를 구현하려면 CSS3의 내용에 대한 기본적인 이해가 필요하고 CSS의 기본 구문을 마스터해야 합니다. CSS3에서 마스터해야 할 주요 내용은 다음과 같습니다.
CSS3의 변환, 회전 회전 및 번역과 같은 번역 속성.
CSS3의 애니메이션 구현을 이해하세요.
CSS3의 과도한 특수 효과를 이해하세요.
html의 코드는 매우 간단합니다. 가장 중요하고 핵심적인 부분은 css3의 코드입니다. 구체적인 구현은 다음과 같이 설명하겠습니다. 코드에.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> html{ background: radial-gradient(ellipse at center, #2A2A2A 0%, #000000 100%); width: 100%; height:100%; } .sence{ width: 600px; height:600px; position: fixed; top: 0; left:0; right:0; bottom:0; margin: auto; } .box{ width: 300px; height:300px; position: relative; transform-style: preserve-3d; transform-origin: center center 75px; /*允许改变转换元素的位置*/ animation: myfirst 3s linear infinite ; /*指的是匀速变化 并且原路返回*/alternate } .box p{ width: 100%; height:100%; position: absolute; top:0; left:0; border-radius: 5px; transform-style: preserve-3d; box-shadow: 0 0 30px 5px #fff; opacity: 0.8; } @keyframes myfirst { from { transform: skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateZ(90deg); } } .box p:nth-child(1){ background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加,也可以换成背景色*/ background-size: 300px 300px; transform-origin: top; transform: rotateX(90deg); } .box p:nth-child(2){ background-image: url(img/psbe7VL5XVBF.jpg); background-size: 300px 300px; transform-origin:left; transform: rotateY(-90deg); } .box p:nth-child(3){ background-image: url(img/psbeL8Q5LRIN.jpg); background-size: 300px 300px; } .box p:nth-child(4){ background-image: url(img/psbeNEXVJIFI.jpg); background-size: 300px 300px; transform-origin:right; transform: rotateY(90deg); } .box p:nth-child(5){ background-image: url(img/psbeUIJ7FZJ6.jpg); background-size: 300px 300px; transform-origin: bottom; transform: rotateX(-90deg); } .box p:nth-child(6){ background-image: url(img/psbR3FYMIPK.jpg); background-size: 300px 300px; transform: translateZ(300px); }</style><body><p class="sence"> <p class="box"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </p></p></body></html>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
프론트 엔드에서 모듈성을 사용해야 하는 이유는 무엇인가요?
위 내용은 CSS3를 사용하여 3D 입체 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!