Çağlar Bostancı

TURKEY/Ankara
Programmer
Turkish Language and Literature
Management İnformation Systems
caglarbostanci.com.tr

CSS 3D ANİMASYON

Tarhi : 14-07-2019 11:39:12 | Yazar : ÇAĞLAR BOSTANCI

Merhaba arkadaşlar, bildiğiniz gibi google flash ile yapılan sitelerde seo yapamaması nedeniyle, flash ile yapılan siterler artık tarih oldu. Bu sebepten flash’ın bırakmış olduğu açığı bir çok kodlama dili üstlenmeye başladı ve css de bunlardan biri. Gün geçtikçe css ile animasyonlar yapar hale geldik. Bu uygulamada ise css 3d persvective, transition-style, transfrom, transform-style gibi 3d css kodları ile bir küp yaptım. Bu uygulamada javascript kodlarıda kullanmak zorunda kaldım. Sayfadaki range butonları ile küpü istediğini açıya alabiliyorsunuz. Css 3d ile ilgili bütün kodları ve açıklamalarıyla birlite bir sonraki yazım detaylı olarak ele alacağım. Bu uygulama ile sitenizde persvective bir açı koyabilir ve kullanıcıları etkileye bilirsiniz. Küpün her bir yüzünü buton haline getirebilir yeni bir menü türü üretebilirsiniz. Her bir div’in içerisine bir video ekleyebilir yeni bir tarz getirebilirsiniz. Bunun gibi bir çok uygulama yapabilirsiniz temel olarak ben hazırladım. Sizlere de faydalı olması dileğiyle, başarılar.


<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>3D ANIMATIN (Anismasyon)</title>
        <meta name="keywords"  content="css perspective kullanımı, css preserve-3d, css transform, transform-style, css 3d, css 3d animatin, Php Developer,php,php mysqli,css, css developer,web tasarım,çağlar bostancı,web master, web tasrım" />
        <meta name="discription" content="css perspective kullanımı, css preserve-3d, css transform, transform-style, css 3d, css 3d animatin" />
 
    <style>
        body{

            background-image: linear-gradient(45deg, lightblue,white,rgb(14, 185, 201));
        }
        
        .babaDiv{
            width:200px;
            margin: 50px auto;
            border:10px solid  mediumpurple;
            padding:150px;
            text-align: center;
            transform-style: preserve-3d;
            transition:all 1s ease;
            transform: perspective(500px) rotateX(0deg) rotateY(odeg) ;
            border-radius: 50%;
        }
        .anaDiv{
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition:all 1s ease;
            transform: perspective(500px) ;
        }
        .anaDiv .cocuk{
            position:absolute;
            width: 200px;
            height: 200px;
            font-size:4vw;
            line-height: 200px;
            color:white;
            box-sizing: border-box;
            text-align: center;
        }
        .anaDiv .cocuk:nth-child(1){
            background: rgba(209, 188, 252,0.7);
            transform: perspective(500px) translateZ(100px);
        }
        .anaDiv .cocuk:nth-child(2){
            background: rgba(212, 10, 3,.7);
            transform: rotateY(180deg) perspective(500px) translateZ(100px);
        }
        .anaDiv .cocuk:nth-child(3){
            background: rgba(48, 3, 212, .7) ;
            transform: rotateY(90deg)  perspective(500px) translateZ(100px);
        }
        .anaDiv .cocuk:nth-child(4){
            background: rgba(20, 212, 3, .7) ;
            transform: rotateY(-90deg)  perspective(500px) translateZ(100px);
        }
        .anaDiv .cocuk:nth-child(5){
            background: rgba(23, 180, 207, .7) ;
            transform: rotateX(90deg)  perspective(500px) translateZ(100px);
        }
        .anaDiv .cocuk:nth-child(6){
            background: rgba(23, 180, 207, .7) ;
            transform: rotateX(-90deg)  perspective(500px) translateZ(100px);
        }


        table{ position: relative;}
        table tr{
            line-height: 2vh;
            height: 2vw;
            font-size:2vw;
            vertical-align: middle;
        }
        table tr td:nth-child(1){ padding-right:1vw;}
        table tr td:nth-child(2){
            border-left:1px solid black;
            padding-left:1vw;
        }

    </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Küp Y Konum</td>
                <td> -360<input id="dikey"  type="range" min="-360" max="360">360 <span class="kupY"></span></td>
            </tr>
            <tr>
                <td>Küp X Konum</td>
                <td>-360<input id="yatay" type="range" min="-360" max="360">360 <span class="kupX"></span></td>
            </tr>
            <tr>
                <td>Platform X Konum</td>
                <td> -360<input id="platformYatay" type="range" min="-360" max="360">360  <span class="platformX"></span></td>
            </tr>
            <tr>
                <td>Platform Y Konum</td>
                <td>-360<input id="platformDikey"  type="range" min="-360" max="360">360  <span class="platformY"></span></td>
            </tr>
        </table>
   
    
        <div class="babaDiv">
            <div class="anaDiv">
                <div class="cocuk">ÖN</div>
                <div class="cocuk">ARKA</div>
                <div class="cocuk">SOL</div>
                <div class="cocuk">SAG</div>
                <div class="cocuk">YUKARI</div>
                <div class="cocuk">AŞAĞI</div>
            </div>
        </div>
        <script>
            var inputRange=document.querySelectorAll("input[type='range']");
            inputRange[0].onchange=function(){konum();}
            inputRange[1].onchange=function(){konum();}
            inputRange[2].onchange=function(){konum();}
            inputRange[3].onchange=function(){konum();}
            function konum(){
                anaDiv=document.querySelectorAll(".anaDiv")[0];
                babaDiv=document.querySelectorAll(".babaDiv")[0];
                x=document.querySelectorAll("input#yatay")[0].value;
                document.querySelectorAll(".kupX")[0].innerText=x;
                y=document.querySelectorAll("input#dikey")[0].value;
                document.querySelectorAll(".kupY")[0].innerText=y;
                px=document.querySelectorAll("input#platformDikey")[0].value;
                document.querySelectorAll(".platformX")[0].innerText=px;
                py=document.querySelectorAll("input#platformYatay")[0].value;
                document.querySelectorAll(".platformY")[0].innerText=py;
                anaDiv.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
                babaDiv.style.transform="rotateX("+px+"deg) rotateY("+py+"deg)";
            }
            
        
            
        </script>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!doctype html>

<html>

<head>

<title>3D ANIMATIN (Anismasyon)</title>

<style>

body{

background-image: linear-gradient(45deg, lightblue,white,rgb(14, 185, 201));

}

.babaDiv{

width:200px;

margin: 50px auto;

border:10px solid mediumpurple;

padding:150px;

text-align: center;

transform-style: preserve-3d;

transition:all 1s ease;

transform: perspective(500px) rotateX(0deg) rotateY(odeg) ;

border-radius: 50%;

}

.anaDiv{

position: relative;

width: 200px;

height: 200px;

transform-style: preserve-3d;

transition:all 1s ease;

transform: perspective(500px) ;

}

.anaDiv .cocuk{

position:absolute;

width: 200px;

height: 200px;

font-size:4vw;

line-height: 200px;

color:white;

box-sizing: border-box;

text-align: center;

}

.anaDiv .cocuk:nth-child(1){

background: rgba(209, 188, 252,0.7);

transform: perspective(500px) translateZ(100px);

}

.anaDiv .cocuk:nth-child(2){

background: rgba(212, 10, 3,.7);

transform: rotateY(180deg) perspective(500px) translateZ(100px);

}

.anaDiv .cocuk:nth-child(3){

background: rgba(48, 3, 212, .7) ;

transform: rotateY(90deg) perspective(500px) translateZ(100px);

}

.anaDiv .cocuk:nth-child(4){

background: rgba(20, 212, 3, .7) ;

transform: rotateY(-90deg) perspective(500px) translateZ(100px);

}

.anaDiv .cocuk:nth-child(5){

background: rgba(23, 180, 207, .7) ;

transform: rotateX(90deg) perspective(500px) translateZ(100px);

}

.anaDiv .cocuk:nth-child(6){

background: rgba(23, 180, 207, .7) ;

transform: rotateX(-90deg) perspective(500px) translateZ(100px);

}

table{ position: relative;}

table tr{

line-height: 2vh;

height: 2vw;

font-size:2vw;

vertical-align: middle;

}

table tr td:nth-child(1){ padding-right:1vw;}

table tr td:nth-child(2){

border-left:1px solid black;

padding-left:1vw;

}

</style>

</head>

<body>

<table>

<tr>

<td>Küp Y Konum</td>

</tr>

<tr>

<td>Küp X Konum</td>

</tr>

<tr>

<td>Platform X Konum</td>

</tr>

<tr>

<td>Platform Y Konum</td>

</tr>

</table>

<div class="cocuk">YUKARI</div>

<div class="cocuk">AŞAĞI</div>

</div>

var inputRange=document.querySelectorAll("input[type='range']");

inputRange[0].onchange=function(){konum();}

inputRange[1].onchange=function(){konum();}

inputRange[2].onchange=function(){konum();}

inputRange[3].onchange=function(){konum();}

function konum(){

anaDiv=document.querySelectorAll(".anaDiv")[0];

babaDiv=document.querySelectorAll(".babaDiv")[0];

x=document.querySelectorAll("input#yatay")[0].value;

document.querySelectorAll(".kupX")[0].innerText=x;

y=document.querySelectorAll("input#dikey")[0].value;

document.querySelectorAll(".kupY")[0].innerText=y;

px=document.querySelectorAll("input#platformDikey")[0].value;

document.querySelectorAll(".platformX")[0].innerText=px;

py=document.querySelectorAll("input#platformYatay")[0].value;

document.querySelectorAll(".platformY")[0].innerText=py;

anaDiv.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";

babaDiv.style.transform="rotateX("+px+"deg) rotateY("+py+"deg)";

}

</script>

</body>

</html>

DEMO

Çağlar Bostancı

CSS 3D ANİMASYON