Pure CSS Transforms example

Accordions Bootstrap 5Free+ CSS

Pure CSS Transforms example: a hand-crafted, open-source Bootstrap 5 accordion. HTML & CSS included, ready to copy.

2.8k views23 downloads4 years ago

gosnippets.com/preview/pure-css-transforms-example

Source Code

1<div class="wrap">
2  <div class="box">
3    <div class="blue scaleX ">
4      scaleX
5    </div>
6  </div>
7  <div class="box">
8    <div class="blue scaleY">
9      scaleY
10    </div>
11  </div> 
12  <div class="box">
13    <div class="blue scale">
14      scale
15    </div>
16  </div> 
17  <div class="box">
18    <div class="blue translateX">
19      translateX
20    </div>
21  </div> 
22  <div class="box">
23    <div class="blue translateY">
24      translateY
25    </div>
26  </div>
27  <div class="box">
28    <div class="blue translate">
29      translate
30    </div>
31  </div>  
32  <div class="box">
33    <div class="blue matrix">
34      matrix
35    </div>
36  </div>  
37  <div class="box">
38    <div class="blue rotate">
39      rotate
40    </div>
41  </div>  
42  <div class="box">
43    <div class="blue skew">
44      skew
45    </div>
46  </div>
47  <div class="box">
48    <div class="blue skewX">
49      skewX
50    </div>
51  </div>  
52  <div class="box">
53    <div class="blue skewY">
54      skewY
55    </div>
56  </div>  
57  <div class="box">
58    <div class="blue matrix3d">
59      matrix3d
60    </div>
61  </div>
62  <div class="box">
63    <div class="blue translate3d">
64      translate3d
65    </div>
66  </div>
67 <div class="box">
68   <div class="blue rotateY">
69    rotateY
70   </div>
71 </div>
72 <div class="box">
73   <div class="blue rotateX">
74    rotateX
75   </div>
76 </div>
77 <div class="box">
78   <div class="blue translateZ">
79    translateZ
80   </div>
81 </div> 
82</div>
83

More Accordions snippets

Bootstrap 5 accordion with chevron up and down

Free Bootstrap 5 accordion snippet — Bootstrap 5 accordion with chevron up and down. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

AccordionsView →

Bootstrap 5 accordion dropdown menu snippets

Bootstrap 5 accordion dropdown menu snippets: a hand-crafted, open-source Bootstrap 5 accordion. HTML, CSS & JS included, ready to copy.

AccordionsView →

Cool image accordion with pure CSS

Add a accordion to your UI with Cool image accordion with pure CSS. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

AccordionsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="wrap"> 2 <div class="box"> 3 <div class="blue scaleX "> 4 scaleX 5 </div> 6 </div> 7 <div class="box"> 8 <div class="blue scaleY"> 9 scaleY 10 </div> 11 </div> 12 <div class="box"> 13 <div class="blue scale"> 14 scale 15 </div> 16 </div> 17 <div class="box"> 18 <div class="blue translateX"> 19 translateX 20 </div> 21 </div> 22 <div class="box"> 23 <div class="blue translateY"> 24 translateY 25 </div> 26 </div> 27 <div class="box"> 28 <div class="blue translate"> 29 translate 30 </div> 31 </div> 32 <div class="box"> 33 <div class="blue matrix"> 34 matrix 35 </div> 36 </div> 37 <div class="box"> 38 <div class="blue rotate"> 39 rotate 40 </div> 41 </div> 42 <div class="box"> 43 <div class="blue skew"> 44 skew 45 </div> 46 </div> 47 <div class="box"> 48 <div class="blue skewX"> 49 skewX 50 </div> 51 </div> 52 <div class="box"> 53 <div class="blue skewY"> 54 skewY 55 </div> 56 </div> 57 <div class="box"> 58 <div class="blue matrix3d"> 59 matrix3d 60 </div> 61 </div> 62 <div class="box"> 63 <div class="blue translate3d"> 64 translate3d 65 </div> 66 </div> 67 <div class="box"> 68 <div class="blue rotateY"> 69 rotateY 70 </div> 71 </div> 72 <div class="box"> 73 <div class="blue rotateX"> 74 rotateX 75 </div> 76 </div> 77 <div class="box"> 78 <div class="blue translateZ"> 79 translateZ 80 </div> 81 </div> 82</div> 83