CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

What I want to achieve is a camera rotation like http://www.keithclark.co.uk/labs/3dcss/demo/ . It's not perfect and sometimes the camera breaks, but that's the idea.

I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well. I have established that the best method is to use @media queries from the CSS3 spec, As such these are my media queries at the minute: @media screen and (max-width: 1000px) { ... } Above is for small desktop and laptop screens. @media screen and (max-width: 700px) { ... } Above is for the iPad and VERY small desktop/laptop screens. @media screen and (max-device-width: 480px) { ... } Above is for iPhone 3GS- and mobile devices in general. However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit): @media screen and (-webkit-min-device-pixel-ratio: 2) { ... } N...

So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end. Here is the CSS: .cloned_object { position:absolute; background-color:white; width: 700px; height: 640px; margin: 0; /*for centering purposes*/ -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; transition: width 1s, height 1s, top 1s, left 1s, margin 1s; } and the JS function: $('.content_cell').on('click', function(event) { // if the user is on a browser older then IE9 if ($.browser.msie && $.browser.version.substr(0,1)<10) { var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable'); ...

It's a miracle to me why the scale transform does behave in such a strange way. The two elements shown below in the image have exactly the same html behind, but the scale transform does pixelate some elements... this strange behaviour just appears after a completed drag & drop on the dragged element, and the elements around the dragged element. click to see the Image css is the following: div.KE_coverflowContainer { vertical-align:top; height:122px; width:90px; padding:5px; text-align:center; display:inline-block; margin:10px 5px 5px 0px; background:#e4e4e4; position:relative; cursor:default; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #bababa; } div.KE_coverflowContainerHover { -moz-transform: scale(2) translate(0px,29px); -o-transform: scale(2) translate(0px,29px); -webkit-transform: scale(2) translate(0px,29px); transform: scale(2) translate(0px,29px); z-index:1000; c...

It's a miracle to me why the scale transform does behave in such a strange way. The two elements shown below in the image have exactly the same html behind, but the scale transform does pixelate some elements... this strange behaviour just appears after a completed drag & drop on the dragged element, and the elements around the dragged element. click to see the Image css is the following: div.KE_coverflowContainer { vertical-align:top; height:122px; width:90px; padding:5px; text-align:center; display:inline-block; margin:10px 5px 5px 0px; background:#e4e4e4; position:relative; cursor:default; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #bababa; } div.KE_coverflowContainerHover { -moz-transform: scale(2) translate(0px,29px); -o-transform: scale(2) translate(0px,29px); -webkit-transform: scale(2) translate(0px,29px); transform: scale(2) translate(0px,29px); z-index:1000; c...