17 css transforms

566 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

17 css transforms

  1. 1. CSS3 TransformsMore than meets the eye!
  2. 2. Old-school transitions were done withJavaScript and dynamic HTML<script language="javascript">!var theDiv =! document.getElementById("theDiv");!var y = 5; //StartLocation!var destY = 300; //EndLocation!function moveImage() {! if(y < dest_y) y = y + 10;!! theDiv.style.top = y +px;! if (y + 10 < dest_y) {! window.setTimeout(moveImage(),100);! }!}!</script>!
  3. 3. As of CSS3 we can now alter DOMelements with styles—  We can change ◦  location (move) ◦  angle (rotate) ◦  size (scale) ◦  distortion (skew)
  4. 4. Scaling: height and width#theDiv {! height: 10px;! width: 10px;!}!#theDiv:focus {! height: 100px;! width: 100px;!}!
  5. 5. Hands-on scalingDemo: size
  6. 6. Locationdiv.move {! width: 50px;! height: 50px;! padding: 10px;! margin-left: 0px;!}!div.move:hover {! margin-left: 400px;!} !
  7. 7. Hands-on location transformsDemo: location
  8. 8. Rotation@-webkit-keyframes spinnerRotate {! !from {! ! !-webkit-transform:rotate(0deg);! !}! !to {! ! !-webkit-transform:rotate(360deg);! !}!}!
  9. 9. Demo: A Hands-on rotation spinner
  10. 10. Color#theDiv {
 background-color: #eee;
 color: white;
 border-radius: 5px;
}!#theDiv:hover {
 background-color: #f00;
}!
  11. 11. Text— Font-size— Font-weight
  12. 12. Demo: color andcolor and text Hands-on text
  13. 13. Conclusion—  Transforms can make our sites come alive—  What used to require JavaScript can now be done with simple styles—  We can transform location, scale, rotation, color, fonts, and more
  14. 14. Further study—  Cool articles on transforms ◦  http://www.css3.info/preview/css3-transitions/ ◦  http://24ways.org/2009/going-nuts-with-css- transitions

×