JSFiddle - React, Tailwind, and code Playground

by alaa13212

HTML

<html lang="ar">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>HTML</title>
        <meta name="description" content="" />
        <meta name="author" content="alaa13212" />
    </head>

    <body>
        <div>
            <header>
                <h1>3d css3</h1>
            </header>

            <div>
                <section class="container">
                    <div class="carousel">
                        <figure>1</figure>
                        <figure>2</figure>
                        <figure>3</figure>
                        <figure>4</figure>
                        <figure>5</figure>
                        <figure>6</figure>
                        <figure>7</figure>
                        <figure>8</figure>
                        <figure>9</figure>
                        <figure>10</figure>
                        <figure>11</figure>
                        <figure>12</figure>
                        <figure>13</figure>
                        <figure>14</figure>
                        <figure>15</figure>
                    </div>
                </section>
                <button id="prov">السابق</button>
                <button id="next">التالي</button>
            </div>
            <footer>
                <p>
                    &copy; Copyright  by alaa13212
                </p>
            </footer>
        </div>
    </body>
</html>

CSS

body{
    direction: rtl;
    overflow: hidden;
}
.container{
    margin: 60px auto 60px;
    border: 1px solid #ccc;
    width:824px;
    height:424px;
    position: relative;
    -webkit-perspective: 600px;
       -moz-perspective: 600px;
         -o-perspective: 600px;
            perspective: 600px;
}
.carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
}
.carousel figure {
    font-size: 300px;
    text-align:center;
    line-height:400px;
    margin:0;
    border:2px solid #000;
    display: block;
    position: absolute;
    width: 800px;
    height: 400px;
    top:10px;
    left:10px;
    -webkit-backface-visibility: visible;
       -moz-backface-visibility: visible;
         -o-backface-visibility: visible;
            backface-visibility: visible;
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
}

JavaScript

var tz;
var browsers = ['','-webkit-','-moz-','-o-'];
var browser = null;
var perspectives = ['perspective','WebkitPerspective','MozPerspective','OPerspective'];
var nawPanel = 0;
for(var i in perspectives){
    if(perspectives[i] in document.body.style){
        browser = i;
    }
}
if(browser == null) alert('متصفحك غير داعم');
else{
    perspective = browsers[browser]+'perspective';
    transform = browsers[browser]+'transform';
    transformOrigin = browsers[browser]+'transform-origin';
    transformStyle = browsers[browser]+'transform-style';
    transition = browsers[browser]+'transition';
    backfaceVisibility = browsers[browser]+'tackface-visibility';
}
$(document).ready(function(){
    style = $('<style />',{rel:'stylesheet'});
    panels = $('.container figure');
    numberOfPanels = panels.length;
    panelSize = $('.container').width();
    thita = 360/numberOfPanels;
    tz = Math.round( ( panelSize / 2 ) / Math.tan( Math.PI / numberOfPanels ) );
    pp = window.innerWidth/numberOfPanels*4.6;
    $('.container').css(perspective,pp+'px');
    style.html(style.html() + '.carousel{'+transform+':translateZ( -'+tz+'px )}');
    panels.each(function(i,el){
        angle = thita*i;
        rz = (i-nawPanel)*thita;
        style.html(style.html()+'.carousel figure:nth-child('+(i+1)+') { background-color: hsla(' + angle + ', 100%, 50%, 0.8);'+transform+': rotateY( '+angle+'deg ) translateZ( '+tz+'px ) ;}');
    });
    $('head').append(style);
    $('#prov').click(function(){
        var provPanel = nawPanel-1;
        var angle = thita*provPanel;
        $('.carousel').css(transform,'translateZ( -'+tz+'px ) rotateY( '+(-angle)+'deg )');
        nawPanel = provPanel;
        style.html('');
        panels.each(function(i,el){
            angle = thita*i;
            rz = (i-nawPanel)*thita;
            style.html(style.html()+'.carousel figure:nth-child('+(i+1)+') { background-color: hsla(' + angle + ', 100%, 50%, 0.8);'+transform+': rotateY( '+angle+'deg )...