css로 주사위 만들기, transform, animation 실습/ 자바스크립트, 제이쿼리 없이 슬라이드배너 버튼 만들기

 

 

transform rotate

 

3D 주사위 만들기 실습

.wrap{
    width:200px;
    height:200px;
    position: relative;
    font-size:100px;
    text-align: center;
    line-height: 200px;
    color:white;
    margin:100px auto;
    transform-style: preserve-3d;
    transform:rotate3d(1,1,0,0deg);
    transition:3s;
}

.wrap:hover{
    transform:rotate3d(1,1,0,360deg)
}

.wrap>div{
    width:200px;
    height:200px;
    position: absolute;
}
.box1{
    background-color:rgb(218, 112, 214,0.5);
    transform: translate3d(0,0,100px)
}

.box2{
    background: rgba(255,255,0,0.5);
    transform: rotateY(-90deg) translate3d(0,0,100px)
}
.box3{
    background: rgba(255, 20, 0, 0.5);
    transform: rotateX(-90deg) translate3d(0,0,100px)
}
.box4{
    background: rgba(0, 255, 39, 0.5);
    transform: rotateX(90deg) translate3d(0,0,100px)
}
.box5{
    background: rgba(0, 118, 255, 0.5);
    transform:rotateY(90deg) translate3d(0,0,100px)
}
.box6{
    background: rgba(255, 128, 0, 0.5);
    transform:rotateY(180deg) translate3d(0,0,100px)
}

 

animation

        div{
            width:100px;
            height:100px;
            background-color: deeppink;
            border-radius: 50%;
            position:absolute;
            animation-duration: 3s;
            animation-name: ani;
            animation-iteration-count: infinite;
            animation-direction:alternate;
        }
        
        @keyframes ani{
            from{
                left:10px;
                top:10px;
            }
            50%{
                left:500px;
                top:400px;
            }
            to{
                left:1000px;
                top:10px;
            }
        }

 

 

자바스크립트/제이쿼리 없이 css만으로 배너 슬라이드 도트와 애로우 버튼 만들기

 

<input type="radio" id="btn1" name="btn" checked>
    <label for="btn1" class="cicle c1">c1</label>
<input type="radio" id="btn2" name="btn">
     <label for="btn2" class="cicle c2">c2</label>
<input type="radio" id="btn3" name="btn">
     <label for="btn3" class="cicle c3">c3</label>
<input type="radio" id="btn4" name="btn">
     <label for="btn4" class="cicle c4">c4</label>        
        
<label for="btn1" class="arrow a1">a1</label>
<label for="btn2" class="arrow a2">a2</label>
<label for="btn3" class="arrow a3">a3</label>
<label for="btn4" class="arrow a4">a4</label>

input{
    display: none;
}

label{
    position:absolute;
    left:50%;
    z-index: 1000;
}

.cicle{
    bottom:50px;
    width:15px;
    height:15px;
    background:grey;
    border-radius: 50%;
}

.c1{
    margin-left:-50px;
}

.c2{
    margin-left:-25px;
}

.c4{
    margin-left:25px;
}

input:checked+label{
    background-color:black;
}

.arrow{
    width:21px;
    height:27px;
    top:50%;
    background-image: url(../images/controls.png);
    display:none;
}

#btn1:checked ~ .a4,
#btn2:checked ~ .a1,
#btn3:checked ~ .a2,
#btn4:checked ~ .a3{
    margin-left:-600px;
    display:block;
}

#btn1:checked ~ .a2,
#btn2:checked ~ .a3,
#btn3:checked ~ .a4,
#btn4:checked ~ .a1{
    margin-left:600px;
    background-position: -21px 0;
    display: block;
}


#btn1:checked ~ .banner>.b1,
#btn2:checked ~ .banner>.b2,
#btn3:checked ~ .banner>.b3,
#btn4:checked ~ .banner>.b4{
    opacity: 1
}