CSS3 실전 - 3d 변환 - 슈퍼 입방체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D </title>
<style> body { margin: 0; padding: 0; background-color: black; perspective: 1000px; color: white; } .box { margin: 200px auto; height: 200px; width: 200px; position:relative; transform-style:preserve-3d; transform:rotateX(30deg) rotateY(30deg); animation: rotate 10s linear infinite; } .box div { line-height: 200px; text-align: center; position:absolute; top: 0; left:0; right:0; bottom:0; transition: all 1s; box-shadow: inset 0 0 1px 6px rgba(255,255,255,0.8), inset 0 0 1px 12px rgba(255,255,0,0.8), inset 0 0 1px 18px rgba(255,0,0,0.8), inset 0 0 1px 24px rgba(0,0,255,0.8), 0 0 80px 10px rgba(255,255,255,0.8); } /* */ .box .little { line-height: 100px; top: 25%; left:25%; right:25%; bottom:25%; } /* 3d */ .front { transform: translateZ(100px); background:rgba(255,255,0,0.8); } .back { transform: translateZ(-100px); background:rgba(0,255,255,0.8); } .left { transform: rotateY(-90deg) translateZ(100px); background:rgba(0,255,0,0.8); } .right { transform: rotateY(90deg) translateZ(100px); background:rgba(0,0,255,0.8); } .top { transform: rotateX(90deg) translateZ(100px); background:rgba(255,0,255,0.8); } .bottom { transform: rotateX(-90deg) translateZ(100px); background:rgba(125,125,255,0.8); } /* hover */ .box:hover .front { transform: translateZ(200px); } .box:hover .back { transform: translateZ(-200px); } .box:hover .left { transform: rotateY(-90deg) translateZ(200px); } .box:hover .right { transform: rotateY(90deg) translateZ(200px); } .box:hover .top { transform: rotateX(90deg) translateZ(200px); } .box:hover .bottom { transform: rotateX(-90deg) translateZ(200px); } /* 3d */ .l-front { transform: translateZ(50px); background:rgba(255,255,0,0.8); } .l-back { transform: translateZ(-50px); background:rgba(0,255,255,0.8); } .l-left { transform: rotateY(-90deg) translateZ(50px); background:rgba(0,255,0,0.8); } .l-right { transform: rotateY(90deg) translateZ(50px); background:rgba(0,0,255,0.8); } .l-top { transform: rotateX(90deg) translateZ(50px); background:rgba(255,0,255,0.8); } .l-bottom { transform: rotateX(-90deg) translateZ(50px); background:rgba(125,125,255,0.8); } /* hover */ .box:hover .l-front { transform: translateZ(100px); } .box:hover .l-back { transform: translateZ(-100px); } .box:hover .l-left { transform: rotateY(-90deg) translateZ(100px); } .box:hover .l-right { transform: rotateY(90deg) translateZ(100px); } .box:hover .l-top { transform: rotateX(90deg) translateZ(100px); } .box:hover .l-bottom { transform: rotateX(-90deg) translateZ(100px); } /* */ @keyframes rotate { from { transform: rotateX(0deg) rotateY(360deg) } to { transform: rotateX(360deg) rotateY(0deg) } } </style>
</head>
<body>
<div class="box">
<!-- -->
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<!-- -->
<div class="little l-front">front</div>
<div class="little l-back">back</div>
<div class="little l-left">left</div>
<div class="little l-right">right</div>
<div class="little l-top">top</div>
<div class="little l-bottom">bottom</div>
</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
