No.5 - 순수 CSS로 중축을 중심으로 회전하는 입방체 만들기

10864 단어 
body{
    background-color: #000;
    margin: 0;
    padding: 0;
}
main{
    perspective: 800px;
}
.cube{
    transform-style: preserve-3d;
    position: relative;
    margin: 200px auto 0px;
    width: 400px;
    height: 400px;
    animation: spin 8s linear infinite;
    animation-play-state: paused;
}
.cube>div{
    background-color: blue;
    opacity: 0.3;
    position: absolute;
    outline: 3px solid #0af;
    width: 400px;
    height:400px;
}
.cube>div:nth-child(1){
    transform: translateZ(200px);
}
.cube>div:nth-child(2){
    transform: rotateY(180deg) translateZ(200px);
}
.cube>div:nth-child(3){
    transform: rotateY(90deg) translateZ(200px);
}
.cube>div:nth-child(4){
    transform: rotateY(-90deg) translateZ(200px);
}
.cube>div:nth-child(5){
    transform: rotateX(90deg) translateZ(200px);
}
.cube>div:nth-child(6){
    transform: rotateX(-90deg) translateZ(200px);
}
@keyframes spin{
    100%{transform: rotateY(-360deg);}
}
.cube:hover{
    animation-play-state: running;
}
DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>  CSS            title>
    <link rel="stylesheet" href="style.css">
head>
<body>
<main>
    <div class="cube">
        <div>div>
        <div>div>
        <div>div>
        <div>div>
        <div>div>
        <div>div>
    div>
main>
body>
html>

중점을 두다
① 여러 요소 absolute에 중첩
②transform: rotateY(180deg) translateZ(200px);transform:translateZ(200px)rotateY(180deg);
선후의 차이는 커다란 차이가 있다!
.cube>div:nth-child(1){
    transform: translateZ(200px);
}
.cube>div:nth-child(2){
    transform: rotateY(180deg) translateZ(200px);
}
.cube>div:nth-child(3){
    transform: rotateY(90deg) translateZ(200px);
}
.cube>div:nth-child(4){
    transform: rotateY(-90deg) translateZ(200px);
}
.cube>div:nth-child(5){
    transform: rotateX(90deg) translateZ(200px);
}
.cube>div:nth-child(6){
    transform: rotateX(-90deg) translateZ(200px);
}

먼저 중점에서 회전한 다음에 각자 변화한 Z방향으로 200px를 추진한다.
200px를 집단적으로 추진한 후 중점에서 회전하는 것이 아니다.
③margin:200px auto 0px;
④ 3D 무대 요소는 시각에 결정적(body와 같은 큰 배경 좌석 무대 요소는 화면에 더욱 진실한 효과를 낸다)
⑤ 
animation: name duration timing-function delay iteration-count direction;
animation-play-state: paused;
animation-play-state: running;
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
.cube:hover{
    animation-play-state: running;
}

TimesTen 데이터베이스 복제 학습: 9.Active Standby Pair 변경
Find/Filter 차이점

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage