How does google do the barrel roll?
If you look at the css code :
body {
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-name: roll;
}
What are some cool JQuery/CSS3 effects like Google's Barrel Roll
Highlight elements - http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html
Textarea auto-complete - http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/
Featured Content Slider - http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
10 Photo Galleries and Sliders - http://www.queness.com/post/222/10-jquery-photo-gallery-and-slider-plugins
Scrollable - New Wave UI Design - http://flowplayer.org/tools/scrollable/
50 CSS3 Animations - http://www.1stwebdesigner.com/css/50-awesome-css3-animations/
nth-child everywhere (easy table zebra striping). - http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere
How does Google get the site's description, when there is no description present in the HTML?
From here
We use a number of different sources for this information, including descriptive information in the title and meta tags for each page. We may also use publicly available information—for instance, anchor text or listings from the Open Directory Project (DMOZ)—or create rich snippets based on markup on the page.
In this case, it most likely came from DMOZ
How to make a div execute its style animations with and if/else in JS
Assuming you're using jQuery (looking at your tags in the question):
function barrel() { var css = document.createElement('style'); css.type = 'text/css'; css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}'; document.getElementsByTagName('head')[0].appendChild(css) return css.innerHTML;}
$('input').on('change', function() { if (this.value === 'Do a barrel roll') { barrel(); }});
Click event lost after css animation
You need to remove the animation that you applied after it has finished and then re-add it on subsequent clicks.
var $body = $('body');
$('#roll').on('click', function() { $body.addClass('barrel-roll');});
$body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) { $body.removeClass('barrel-roll'); });
@-webkit-keyframes roll {from { -webkit-transform: rotate(0deg) }to { -webkit-transform: rotate(360deg) }}
@-moz-keyframes roll {from { -moz-transform: rotate(0deg) }to { -moz-transform: rotate(360deg) }}
@keyframes roll {from { transform: rotate(0deg) }to { transform: rotate(360deg) }}
.barrel-roll { -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count:1; -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count:1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="roll"> <h1>click me</h1></div>
Rotate table * degrees in HTML
I would use CSS3 transforms for this. You will need to use the relevant browser prefixes to make it cross browser
CSS3 Transforms
How to rotate character's head around the body's up and right vectors?
You said you can understand why this happens but here is a great post on this topic on gamedev.stackexchange.
And here is a quick fix: Rotate the head horizontally around the body up vector (in "body space") and rotate the head vertically around the head right vector (in "head space"). Here the head
is a child of the body
.
public Transform body;
public Transform head;
public float rotationSpeed;
void Update()
{
var amountX = (-Input.GetAxis("Mouse Y")) * Time.deltaTime * rotationSpeed;
var amountY = Input.GetAxis("Mouse X") * Time.deltaTime * rotationSpeed;
head.Rotate(body.up, amountY, Space.World);
head.Rotate(head.right, amountX, Space.World);
}
Related Topics
Why Does Changing a CSS Class Name Break The Styles
CSS: Is There Any Difference Between These Two Parts
Why Does Display Inline-Block Match Height of Text
How to Select The Last-Child of The Last-Child
How to Include a Custom CSS File in Typo3
Vuejs-Datepicker Change Styles Doesn't Work
What Exactly Does This CSS Selector with a Comma Match
Svg Rotation Animation Failing in Ie and Ff
Class Selector Not Working in CSS, But Id Works for Add Some Styles
How to Scale Svg Path to Fit The Window Size
Facebook Like Button - How to Disable Comment Pop Up Box
How to Use Nth-Child Correctly
Flex-Basis for Wrapping Columns
Writing Flexbox Code for 2-Column and 3-Column on Desktop and Mobile (Wrap)
Why Does Bem Often Use Two Underscores Instead of One for Modifiers