Can I use "Pure CSS Transforms example" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Accordions

Pure CSS Transforms example

techadmin4 years ago

2.8kViews

23Downloads

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

How to use this snippet

Copy the HTML, CSS from the code block above.
Paste into your Bootstrap 5 project, static site, or framework component.
Include Bootstrap 5 CSS/JS from CDN or your bundle before custom styles.
Open the live preview to verify layout before shipping.

Customization tips

Swap brand colors by updating CSS variables, Bootstrap theme classes, or Tailwind utility classes.
Adjust spacing with margin/padding utilities to match your design system grid.
Override Bootstrap Sass variables if you compile from source.

Best for

Accordions sections on marketing sites, SaaS dashboards, and admin panels.
Especially useful for projects tagged with accordion, animation.
MIT licensed — commercial and personal projects welcome.

Accessibility notes

Preserve semantic HTML (headings, labels, buttons, landmarks) when adapting the markup.
Keep visible focus styles for keyboard users; do not remove outline without a replacement.
Test interactive controls with Tab/Shift+Tab and a screen reader before production.

Responsive design

Preview at mobile (375px), tablet (768px), and desktop (1280px) breakpoints.
Collapsible patterns (navbars, tables) should scroll or stack without horizontal overflow.
Use relative units (rem, %) where possible for zoom-friendly typography.

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.

Sign in to join the conversation.

Now also on Tailwind

Working in Tailwind? Explore our Tailwind gallery

Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.

24

Components

57

Views

6

Likes

Browse components Submit yours

N

Tailwind

Neon Music Player Widget

Maya21

S

Tailwind

Step Wizard Onboarding

GoSnippets AI6

R

Tailwind

Radial Floating Action Menu

GoSnippets AI6

P

Tailwind

Pulse Stats — Animated React Dashboard

GoSnippets AI5

Trending now

More Bootstrap snippets developers are viewing this week.

View all trending

#music player#waveform+3

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.

7View snippet

#ai chat#cyberpunk+5

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.

21View snippet

#neumorphism#event-scheduler+3

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.

7View snippet

Pure CSS Transforms example

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Accordions snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection