How to Transform Into Different Apple Devices with Just CSS3

I have seen many pure CSS drawing, and crazy animation with pure CSS3, but I never get to do that myself. So, I was bored and decided to have a little fun with CSS3, so I make this - transform into different devices, from desktop to laptop, tablet, phone and watch with just simple HTML markup and CSS3.

My main goal is to use the same markup and transform it into different devices. Here is the markup, pretty straight forward.

HTML

HTML structure is pretty simple, but I use a lot of :before and :after to add additional elements just to keep the core markup simple.

<div class="outer-frame">
  <div class="frame">
    <div class="panel">
      <div class="screen"></div>
    </div>
  </div>
  <div class="bottom"></div>      
  <div class="stand"></div>      
</div>

CSS

CSS is the main thing. I coded everything in LESS just to save time. In case you don't use any CSS preprocessor, I think you should, because it can:

• Saving you time
• You can create mixin/function and reuse them
• There are manu pre-defined utilities and functions
• You can use logic in CSS
• It's easy to setup and learn
• Improve CSS readablity

To animate the whole thing, it's pretty simple, I declare code below. Basically it tells the browser to animate all properties in 500ms.

* {
  transition:all .5s ease;  
  box-sizing:border-box;
}  

The first device I made was a Desktop or iMac. Once I have my first devices, I use media query to set the viewport range. By default, it will always display as Desktop, and within @media (min-width:1025px) and (max-width: 1440px), it will show laptop, followed by landscape tablet, portrait tablet, phone and lastly a watch.

Once I have the Desktop worked out, to transform into a laptop, I copied the whole set of CSS, then tweaks the properties to transform it into a laptop and removes unwanted property. I did the same thing for the rest of the devices.

I tested it in all modern browsers, and they work quite well. I'm glad that I get to witness the day when all browsers behave consistently. Here's the demo and download.

• TAGS:
• CSS
• CSS Transform
• CSS3
• HTML
• Tutorial