3D accordion

Developer
AxeLVaisper
Size
13,545 Kb
Views
22,264
  1. 3D accordion Previews
  2. 3D accordion HTML Codes
  3. 3D accordion CSS Codes

How do I make an 3d accordion?

What is a 3d accordion? How do you make a 3d accordion? This script and codes were developed by AxeLVaisper on 09 November 2022, Wednesday.

3D accordion Previews
IQ Test

3D accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}html{}body{background-image:url(data:image/png;base64,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);font:14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.content{background-image:-webkit-gradient(radial,50% 100%,100,50% -50%,100,from(rgba(200,200,200,1.00)),to(rgba(209,209,209,0.00)));background-image:-webkit-radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));background-image:-moz-radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));background-image:-ms-radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));background-image:radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));height:100%;width:100%;position:absolute;overflow:auto}footer{width:100%;height:30px;top:100px;position:relative;text-align:center;color:#797979}
ul.container{top:20px;margin:0 auto;width:50%;position:relative;padding:0;background:#fbfbfb;border:1px solid #7d7d7d;border-bottom:0;list-style:none;z-index:10;display:block;border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;-khtml-border-radius:3px 3px 0 0;box-shadow:0 2px 5px rgba(0,0,0,0.28);-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.28);-moz-box-shadow:0 2px 5px rgba(0,0,0,0.28);-o-box-shadow:0 2px 5px rgba(0,0,0,0.28);-ms-box-shadow:0 2px 5px rgba(0,0,0,0.28);-khtml-box-shadow:0 2px 5px rgba(0,0,0,0.28)}ul.container:after,ul.container:before{content:'';width:96%;height:96%;position:absolute;left:2%;z-index:-1;bottom:-4px;background:#f2f2f2;border:1px solid #a1a1a1;box-shadow:0 2px 4px rgba(0,0,0,0.13);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.13);-moz-box-shadow:0 2px 4px rgba(0,0,0,0.13);-o-box-shadow:0 2px 4px rgba(0,0,0,0.13);-ms-box-shadow:0 2px 4px rgba(0,0,0,0.13);-khtml-box-shadow:0 2px 4px rgba(0,0,0,0.13)}ul.container:before{width:92%;bottom:-8px;left:4%;background:#f2f2f2;border:1px solid #b9b9b9}ul.container li{background:#fbfbfb}.container li label{display:block;color:white;padding:10px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;position:relative;z-index:50;line-height:26px;text-shadow:0 1px 0 rgba(0,0,0,0.6);background-color:#5ba6cc;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:background-color .17s ease;-webkit-transition:background-color .17s ease;-moz-transition:background-color .17s ease;-o-transition:background-color .17s ease;-ms-transition:background-color .17s ease}.container li label,.container.anim-label-4 li label:before{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.10)),to(rgba(0,0,0,0.50)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:-o-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:-ms-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000',EndColorStr='#000000');box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-ms-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-khtml-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1)}ul.container li:first-child,ul.container li:first-child label,ul.container li:first-child label:before{border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;-khtml-border-radius:2px 2px 0 0}ul.container li input{display:none}ul.container li label:hover{background-color:grey}.container li input:checked ~ label{background-color:#5a5a5a}ul.container li article{height:0;overflow:hidden;display: block;-webkit-transition:max-height 1s ease;-moz-transition:max-height 1s ease;-o-transition:max-height 1s ease;-ms-transition:max-height 1s ease;-khtml-transition:max-height 1s ease}ul.container li article p{padding:10px;margin:4px 13px;font-family:Helvetica;word-wrap:break-word;color:#444;font-size:13px;line-height:23px}ul.container li article a{text-decoration:none;color:#6f2a31}ul.container li:last-child article{border-bottom:1px solid #7d7d7d}ul.container li article iframe{border:1px solid #7d7d7d;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);-moz-box-shadow:0 0 10px rgba(0,0,0,0.2);-o-box-shadow:0 0 10px rgba(0,0,0,0.2);-ms-box-shadow:0 0 10px rgba(0,0,0,0.2);-khtml-box-shadow:0 0 10px rgba(0,0,0,0.2)}ul.container li input:checked ~ article{height:auto;max-height:800px}.anim-art li input:checked ~ article p{transform-origin:top;-webkit-transform-origin:top;-moz-transform-origin:top;-khtml-transform-origin:top;animation:fade-bounce .7s ease normal;-webkit-animation:fade-bounce .7s ease normal;-moz-animation:fade-bounce .7s ease normal;-khtml-animation:fade-bounce .7s ease normal}@keyframes fade-bounce{0%{transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}@-webkit-keyframes fade-bounce{0%{-webkit-transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{-webkit-transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{-webkit-transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{-webkit-transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}@-moz-keyframes fade-bounce{0%{-moz-transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{-moz-transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{-moz-transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{-moz-transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}@-khtml-keyframes fade-bounce{0%{-khtml-transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{-khtml-transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{-khtml-transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{-khtml-transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}.anim-label-4 li label{transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);-webkit-transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);-moz-transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);-khtml-transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-origin:top;-webkit-transform-origin:top;-moz-transform-origin:top}.anim-label-4 li label:before{content:attr(title);line-height:45px;text-indent:10px;position:absolute;height:100%;width:100%;color:white;left:0;top:20px;background-color:#5a5a5a;transform:translateZ(-23px) rotateX(-90deg);-webkit-transform:translateZ(-23px) rotateX(-90deg);-moz-transform:translateZ(-23px) rotateX(-90deg);-o-transform:matrix(1,0,0,0,0,0);-ms-transform:matrix(1,0,0,0,0,0);-khtml-transform:translateZ(-23px) rotateX(-90deg)}.container.anim-label-4 input:checked ~ label{background-color:#adadad;animation:flipup .8s forwards normal ease;-webkit-animation:flipup .8s forwards normal ease;-moz-animation:flipup .8s forwards normal ease;-khtml-animation:flipup .8s forwards normal ease}.container.anim-label-4 input:checked ~ label:hover{-moz-transform:none}@keyframes flipup{0%{transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{transform:perspective(800px) translateZ(-43px) rotateX(100deg)}70%{transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}@-webkit-keyframes flipup{0%{-webkit-transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{-webkit-transform:perspective(800px) translateZ(-43px) rotateX(100deg)}70%{-webkit-transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{-webkit-transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}@-moz-keyframes flipup{0%{-moz-transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{-moz-transform:perspective(800px) translateZ(-43px) rotateX(100deg)}70%{-moz-transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{-moz-transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}@-khtml-keyframes flipup{0%{-khtml-transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{-khtml-transform:perspective(800px) translateZ(-40px) rotateX(100deg)}70%{-khtml-transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{-khtml-transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}.buy{transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;-khtml-transition:all .2s ease;height:25px;border:1px #093c49 solid;width:60px;background:#145869;color:white!important;padding:10px 20px;font-size:20px;font-weight:bold;box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-webkit-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-o-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-ms-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-khtml-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4)}.buy:hover{color:#145869!important;background:white!important}.buy:active{box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-o-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-ms-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-khtml-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!DOCTYPE HTML>
<html><head><!-- #IE HTML5 fix ================================--><!--[if IE]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><div class="content"><section><ul class="container anim-label-4 anim-art "><li><input type="radio" id="ac-1" name="ac-3D" checked="checked"/><label for="ac-1" onclick="" title="What is Accordion">What is Accordion</label><article><p>The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.</p></article></li><li><input type="radio" id="ac-2" name="ac-3D" /><label for="ac-2" onclick="" title="Your Panel">Your Panel</label><article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article></li><li><input type="radio" id="ac-3" name="ac-3D" /><label for="ac-3" onclick="" title="Who made this ?">Who made this ?</label><article><p>This is an example of how to create an accordion that has its 3rd panel.</p></article></li><li><input type="radio" id="ac-4" name="ac-3D" /><label for="ac-4" onclick="" title="Overview">Overview</label><article><p>This script is created by Roodper. You can always follow me on <a href="https://twitter.com/#!/roodper">Twitter</a> or <a href="https://www.facebook.com/Roodper">Facebook</a>.</p></article></li><li><input type="radio" id="ac-5" name="ac-3D" /><label for="ac-5" onclick="" title="Notes">Notes</label><article><p>Remember this is just an example. There are more option and features are available in full version.</p><p>Check out video embedding inside accordion panel.</p><p><iframe width="100%" height="315" src="https://www.youtube.com/embed/k3L7pwrE-tw" frameborder="0" allowfullscreen></iframe></p></article></li></ul></section><footer>Created by Roodper.</footer></div></body></html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>
</html>

3D accordion - Script Codes CSS Codes

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}html{}body{background-image:url(data:image/png;base64,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);font:14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.content{background-image:-webkit-gradient(radial,50% 100%,100,50% -50%,100,from(rgba(200,200,200,1.00)),to(rgba(209,209,209,0.00)));background-image:-webkit-radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));background-image:-moz-radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));background-image:-ms-radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));background-image:radial-gradient(50% 0,rgba(209,209,209,0.00),rgba(200,200,200,1.00));height:100%;width:100%;position:absolute;overflow:auto}footer{width:100%;height:30px;top:100px;position:relative;text-align:center;color:#797979}
ul.container{top:20px;margin:0 auto;width:50%;position:relative;padding:0;background:#fbfbfb;border:1px solid #7d7d7d;border-bottom:0;list-style:none;z-index:10;display:block;border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;-khtml-border-radius:3px 3px 0 0;box-shadow:0 2px 5px rgba(0,0,0,0.28);-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.28);-moz-box-shadow:0 2px 5px rgba(0,0,0,0.28);-o-box-shadow:0 2px 5px rgba(0,0,0,0.28);-ms-box-shadow:0 2px 5px rgba(0,0,0,0.28);-khtml-box-shadow:0 2px 5px rgba(0,0,0,0.28)}ul.container:after,ul.container:before{content:'';width:96%;height:96%;position:absolute;left:2%;z-index:-1;bottom:-4px;background:#f2f2f2;border:1px solid #a1a1a1;box-shadow:0 2px 4px rgba(0,0,0,0.13);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.13);-moz-box-shadow:0 2px 4px rgba(0,0,0,0.13);-o-box-shadow:0 2px 4px rgba(0,0,0,0.13);-ms-box-shadow:0 2px 4px rgba(0,0,0,0.13);-khtml-box-shadow:0 2px 4px rgba(0,0,0,0.13)}ul.container:before{width:92%;bottom:-8px;left:4%;background:#f2f2f2;border:1px solid #b9b9b9}ul.container li{background:#fbfbfb}.container li label{display:block;color:white;padding:10px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;position:relative;z-index:50;line-height:26px;text-shadow:0 1px 0 rgba(0,0,0,0.6);background-color:#5ba6cc;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:background-color .17s ease;-webkit-transition:background-color .17s ease;-moz-transition:background-color .17s ease;-o-transition:background-color .17s ease;-ms-transition:background-color .17s ease}.container li label,.container.anim-label-4 li label:before{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.10)),to(rgba(0,0,0,0.50)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:-o-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:-ms-linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));background-image:linear-gradient(top,rgba(0,0,0,0.10),rgba(0,0,0,0.50));filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000',EndColorStr='#000000');box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-ms-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1);-khtml-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.25),0 2px 0 rgba(0,0,0,0.1)}ul.container li:first-child,ul.container li:first-child label,ul.container li:first-child label:before{border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;-khtml-border-radius:2px 2px 0 0}ul.container li input{display:none}ul.container li label:hover{background-color:grey}.container li input:checked ~ label{background-color:#5a5a5a}ul.container li article{height:0;overflow:hidden;display: block;-webkit-transition:max-height 1s ease;-moz-transition:max-height 1s ease;-o-transition:max-height 1s ease;-ms-transition:max-height 1s ease;-khtml-transition:max-height 1s ease}ul.container li article p{padding:10px;margin:4px 13px;font-family:Helvetica;word-wrap:break-word;color:#444;font-size:13px;line-height:23px}ul.container li article a{text-decoration:none;color:#6f2a31}ul.container li:last-child article{border-bottom:1px solid #7d7d7d}ul.container li article iframe{border:1px solid #7d7d7d;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);-moz-box-shadow:0 0 10px rgba(0,0,0,0.2);-o-box-shadow:0 0 10px rgba(0,0,0,0.2);-ms-box-shadow:0 0 10px rgba(0,0,0,0.2);-khtml-box-shadow:0 0 10px rgba(0,0,0,0.2)}ul.container li input:checked ~ article{height:auto;max-height:800px}.anim-art li input:checked ~ article p{transform-origin:top;-webkit-transform-origin:top;-moz-transform-origin:top;-khtml-transform-origin:top;animation:fade-bounce .7s ease normal;-webkit-animation:fade-bounce .7s ease normal;-moz-animation:fade-bounce .7s ease normal;-khtml-animation:fade-bounce .7s ease normal}@keyframes fade-bounce{0%{transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}@-webkit-keyframes fade-bounce{0%{-webkit-transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{-webkit-transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{-webkit-transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{-webkit-transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}@-moz-keyframes fade-bounce{0%{-moz-transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{-moz-transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{-moz-transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{-moz-transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}@-khtml-keyframes fade-bounce{0%{-khtml-transform:perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);opacity:0}40%{-khtml-transform:perspective(800px) translateZ(0px) rotateX(10deg)}70%{-khtml-transform:perspective(800px) translateZ(0px) rotateX(-5deg)}100%{-khtml-transform:perspective(800px) translateZ(0px) rotateX(0deg);opacity:1}}.anim-label-4 li label{transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);-webkit-transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);-moz-transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);-khtml-transform:perspective(0px) translateZ(0px) translateY(0px) rotateX(0deg);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-origin:top;-webkit-transform-origin:top;-moz-transform-origin:top}.anim-label-4 li label:before{content:attr(title);line-height:45px;text-indent:10px;position:absolute;height:100%;width:100%;color:white;left:0;top:20px;background-color:#5a5a5a;transform:translateZ(-23px) rotateX(-90deg);-webkit-transform:translateZ(-23px) rotateX(-90deg);-moz-transform:translateZ(-23px) rotateX(-90deg);-o-transform:matrix(1,0,0,0,0,0);-ms-transform:matrix(1,0,0,0,0,0);-khtml-transform:translateZ(-23px) rotateX(-90deg)}.container.anim-label-4 input:checked ~ label{background-color:#adadad;animation:flipup .8s forwards normal ease;-webkit-animation:flipup .8s forwards normal ease;-moz-animation:flipup .8s forwards normal ease;-khtml-animation:flipup .8s forwards normal ease}.container.anim-label-4 input:checked ~ label:hover{-moz-transform:none}@keyframes flipup{0%{transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{transform:perspective(800px) translateZ(-43px) rotateX(100deg)}70%{transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}@-webkit-keyframes flipup{0%{-webkit-transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{-webkit-transform:perspective(800px) translateZ(-43px) rotateX(100deg)}70%{-webkit-transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{-webkit-transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}@-moz-keyframes flipup{0%{-moz-transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{-moz-transform:perspective(800px) translateZ(-43px) rotateX(100deg)}70%{-moz-transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{-moz-transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}@-khtml-keyframes flipup{0%{-khtml-transform:perspective(600px) translateZ(0px) rotateX(0deg)}40%{-khtml-transform:perspective(800px) translateZ(-40px) rotateX(100deg)}70%{-khtml-transform:perspective(1000px) translateZ(-43px) rotateX(87deg)}100%{-khtml-transform:perspective(1000px) translateZ(-43px) rotateX(90deg)}}.buy{transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;-khtml-transition:all .2s ease;height:25px;border:1px #093c49 solid;width:60px;background:#145869;color:white!important;padding:10px 20px;font-size:20px;font-weight:bold;box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-webkit-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-o-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-ms-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4);-khtml-box-shadow:inset 0 0 0 white,0 0 5px rgba(0,0,0,0.4)}.buy:hover{color:#145869!important;background:white!important}.buy:active{box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-o-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-ms-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white;-khtml-box-shadow:inset 0 0 5px rgba(0,0,0,0.4),0 0 0 white}
3D accordion - Script Codes
3D accordion - Script Codes
Home Page Home
Developer AxeLVaisper
Username AxeLVaisper
Uploaded November 09, 2022
Rating 3.5
Size 13,545 Kb
Views 22,264
Do you need developer help for 3D accordion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AxeLVaisper (AxeLVaisper) Script Codes
Name
3D gallery
Metro KIT UI
Icofont hover effects
Funny menu
Navbar with 3D effect
Tabs with Round Out Borders
Fade loading
Mini Admin panel
Login Form
Slideshow in css
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!