Skip to content
Browse files

Transform 3D relativo a posicao do mouse

  • Loading branch information...
1 parent e69a022 commit aba486fb38cd9077c1faeb62d2f6c16f74e8768f @felquis committed Mar 28, 2012
Showing with 100 additions and 0 deletions.
  1. +68 −0 rotateOnMouseMove/index.html
  2. +32 −0 rotateOnMouseMove/script.js
View
68 rotateOnMouseMove/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html lang="pt-BR">
+<head>
+ <meta charset="UTF-8">
+ <meta name="author" content="Ofelquis Gimenes">
+ <meta name="description" content="Tranformações 3D baseado nos movimentos do mouse">
+ <meta name="keywords" content="3d, transform, css3, mousemove, javascript">
+ <title>CSS3 Transform rotate on mouse move</title>
+ <style type="text/css">
+ html, body{
+ padding: 0;
+ margin: 0;
+ width:100%;
+ height:100%;
+ position: absolute;
+ }
+ #elem{
+ background: url("http://tutsmais.com.br/blog/wp-content/uploads/2012/03/A-Collection-of-CSS-Snippets-for-Sublime-Text-2.png") no-repeat scroll 0 0 black;
+ display: block;
+ font: 50px Impact;
+ height: 62px;
+ margin: 10% auto 0;
+ padding-top: 249px;
+ position: relative;
+ text-align: center;
+ width: 684px;
+ }
+ </style>
+</head>
+<body>
+ <div id="elem">Hello, i'm a happy test</div>
+ <script>
+ /*
+ By : Ofelquis
+ Twitter: @felquis
+ Blog : tutsmais.com.br
+
+ Simples implementação ;)
+ */
+ !(function ($doc, $win) {
+ var screenWidth = $win.screen.width / 2,
+ screenHeight = $win.screen.height / 2,
+ $elem = $doc.querySelectorAll('#elem')[0],
+ validPropertyPrefix = '',
+ otherProperty = 'perspective(600px)';
+
+ if(typeof $elem.style.webkitTransform == 'string') {
+ validPropertyPrefix = 'webkitTransform';
+ } else {
+ if (typeof $elem.style.MozTransform == 'string') {
+ validPropertyPrefix = 'MozTransform';
+ }
+ }
+
+ $doc.addEventListener('mousemove', function (e) {
+ // vars
+ var centroX = e.clientX - screenWidth,
+ centroY = screenHeight - (e.clientY + 13),
+ degX = centroX * 0.1,
+ degY = centroY * 0.1
+
+ // Seta o rotate do elemento
+ $elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg) rotateX('+ degY +'deg)';
+ });
+ })(document, window);
+ </script>
+</body>
+</html>
View
32 rotateOnMouseMove/script.js
@@ -0,0 +1,32 @@
+/*
+ By : Ofelquis
+ Twitter: @felquis
+ Blog : tutsmais.com.br
+*/
+!(function ($doc, $win) {
+ var screenWidth = $win.screen.width / 2,
+ screenHeight = $win.screen.height / 2,
+ $elem = $doc.querySelectorAll('#elem')[0],
+ validPropertyPrefix = '',
+ otherProperty = 'perspective(600px)';
+
+ if(typeof $elem.style.webkitTransform == 'string') {
+ validPropertyPrefix = 'webkitTransform';
+ } else {
+ if (typeof $elem.style.MozTransform == 'string') {
+ validPropertyPrefix = 'MozTransform';
+ }
+ }
+
+ $doc.addEventListener('mousemove', function (e) {
+ // vars
+ var centroX = e.clientX - screenWidth,
+ centroY = screenHeight - (e.clientY + 13),
+ degX = centroX * 0.1,
+ degY = centroY * 0.1
+
+ // Seta o rotate do elemento
+ $elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg) rotateX('+ degY +'deg)';
+ });
+})(document, window);
+

0 comments on commit aba486f

Please sign in to comment.
Something went wrong with that request. Please try again.