This section shows actual dimensions of Apple devices.
If you want to create a set of device, you can change input values to get widths of devices calculated via your base width. Type some numbers and see the changes.
Dimensions
Based on 21,5 inch
Height: 45.0 cm (17.7 inches) Width: 52.8 cm (20.8 inches) Depth: 17.5 cm (6.9 inches)
Dimensions
Based on 13 inch
Height: 1,8 cm (0.71 inches) Width: 31,4 cm (12.35 inches) Depth: 21,9 cm (8.62 inches)
Dimensions
Based on 3rd gen
Height: 24.12 cm (9.50 inches) Width: 18.57 cm (7.31 inches) Depth: 0.94 cm (0.37 inch)
Dimensions
Based on 4s version
Height: 11.5 cm (4.5 inches) Width: 5.9 cm (2.31 inches) Depth: 0.9 cm (0.37 inches)
Dimensions
Based on 5s version
Height: 12.3 cm (4.87 inches) Width: 5.86 cm (2.31 inches) Depth: 0.76 cm (0.3 inch)
Dimensions
Based on non-plus version
Height: 13.81 cm (5.44 inches) Width: 6.7 cm (2.64 inches) Depth: 0.69 cm (0.27 inch)
This section shows couple of examples, where to use Pure CSS Apple Devices. Beyond these, it belongs to your imagination.
Simple slider made with Owl Carousel. Content must be append into .pca-inner
class.
With a few lines of Javascript (only by adding and removing class), you can transform one device to another using CSS3 animation.