View from the use of the accordion became very popular with the advent of Web 2.0. The main objective of the menu to increase the usability of sites on which they apply. The essence of the accordion that gives you access immediately to much information, but it saves much space on the site. Ready-made mass. Here for example one that I quoted in the article on learning jQuery. Today we will experiment a bit with the properties of CSS3, which are only supported in webkit browsers.
Structure of HTML
HTML code is very simple. We have a block div , inside of which there are 4 parts, each of whom is given a tag
. Inside contains Headers, image and text.
![]()
Section 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Section 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
Section 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Section 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
If you live in Astrakhan and look for where to place your ad, then your site http://ast.slando.ru/astrakhan/, where you will find all the free ads Astrakhan .
The structure of the CSS
To begin with we define an element in the accordion offset 100px. This will provide space for our animation. Next, we use a property -webkit-transform to create a perspective of 900px and rotate by 60 degrees. Just add a negative margin on the left in order to bring them to 180px each other. Use psedvo class : first-child to remove a negative offset from the first element.
Add animation using the properties of the transition with a value of 0.7 seconds. This creates a nice effect out of our section accordion. To complete our animation look, you need to add an event when the mouse cursor to one of the sectors. To do this we will be using a pseudo-class : hover and change our perspective on the 0 and the rotation by 10 degrees.
It is worth noting that this example will only work in webkit browsers (Chrome, Safari). Property -webkit-transform: perspective () rotateY () is experimental, but maybe in the near future will be included in the formal specification and support of browsers will be expanded.
