Today’s tutorial is my first in html and css series. And I am very exited to start this vitorial with pure css flip animation within html phone mockup:
First, I am going to add html structure, than some scss rules, based on my Adobe Illustrator tutorial “How to create iphone 7s plus vector mockup“.
I’m using modern workflow with Sass, Gulp and Browsersync, but would be available in plain CSS too. Let’s get started.
Folder structure of our phone mockup
Project structure is pretty simple. There are only two required files:
- Index.html into the root folder
- Style.css inside css/ folder.
You can also see scss/ folder, that contains style.scss. Another files are related to gulp and git.
All our building blocks are within section with class .phone.
First two divs ( .row1 and .row2 ) are wrappers for our earpeace ( two small circles and one rectangle on top of our phone ).
Next group of spans with class .control represents our side controls.
Input[ type=”checkbox” ].btn is our key element and our animation toggler. It’s accompanied by div.class=”screen” with to child elements: section.front and section.back. They are all altogether is our animation target.
Last element is a label.btn is used for styling purposes. It “hides” our checkbox field.
CSS/SCSS styles of our phone