Initial commit (7bca7af7) · Commits · examples / CSS3 Transformations And Animations

README.md

0 → 100644

+15 −0

Changes for README.md: 15 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		## Example files for the title:

		# CSS3 Transformations And Animations, by Craig Buckler

		[![CSS3 Transformations And Animations, by Craig Buckler](http://akamaicovers.oreilly.com/images/9781771371360/cat.gif)](https://www.safaribooksonline.com/library/view/title/9781771371360//)

		The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.

		O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.

		We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.

		If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.

		Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.

Working Files/Chapter 01/No Work Files.rtf

0 → 100644

+7 −0

Changes for Working Files/Chapter 01/No Work Files.rtf: 7 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350
		{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
		{\colortbl;\red255\green255\blue255;}
		\margl1440\margr1440\vieww9000\viewh8400\viewkind0
		\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

		\f0\fs24 \cf0 No work files for this lesson...}
		No newline at end of file

Working Files/Chapter 02/multiple.html

0 → 100644

+34 −0

Changes for Working Files/Chapter 02/multiple.html: 34 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8" />
		<title>CSS3 Transformations</title>
		<link rel="stylesheet" media="all" href="styles/styles.css" />
		</head>
		<body>

		<h1>CSS3 2D Transformations</h1>

		<div id="mybox">
		<h2>Transformed Element</h2>
		<p>This box will be transformed using CSS3.</p>
		</div>

		<p>This text will appear around the box element which is floated to the right.</p>

		<p>Remember that a transform only affects the element itself. The space it would have required before the transformation is still used to determine page flow.</p>

		<style>
		#mybox
		{
		transform: translate(-50%,0) scale(0.8,1) rotate(-20deg) skewX(25deg) skewY(10deg);
		}

		#mybox:hover
		{
		transform: none;
		}
		</style>

		</body>
		</html>
		No newline at end of file

Working Files/Chapter 02/origin-ex1.html

0 → 100644

+37 −0

Changes for Working Files/Chapter 02/origin-ex1.html: 37 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8" />
		<title>CSS3 Transformations</title>
		<link rel="stylesheet" media="all" href="styles/styles.css" />
		</head>
		<body>

		<h1>CSS3 2D Transformations</h1>

		<div id="mybox">
		<h2>Transformed Element</h2>
		<p>This box will be transformed using CSS3.</p>
		</div>

		<p>This text will appear around the box element which is floated to the right.</p>

		<p>Remember that a transform only affects the element itself. The space it would have required before the transformation is still used to determine page flow.</p>

		<style>
		/* rotate an element */
		#mybox
		{
		-webkit-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;
		}

		#mybox:hover
		{
		-webkit-transform: rotate(25deg);
		transform: rotate(25deg);
		}
		</style>

		</body>
		</html>
		No newline at end of file

Working Files/Chapter 02/origin-ex2.html

0 → 100644

+39 −0

Changes for Working Files/Chapter 02/origin-ex2.html: 39 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8" />
		<title>CSS3 Transformations</title>
		<link rel="stylesheet" media="all" href="styles/styles.css" />
		</head>
		<body>

		<h1>CSS3 2D Transformations</h1>

		<div id="mybox">
		<h2>Transformed Element</h2>
		<p>This box will be transformed using CSS3.</p>
		</div>

		<p>This text will appear around the box element which is floated to the right.</p>

		<p>Remember that a transform only affects the element itself. The space it would have required before the transformation is still used to determine page flow.</p>

		<style>
		/* rotate an element */
		#mybox
		{
		-webkit-transform-origin: left top;
		transform-origin: left top;
		-webkit-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;
		}

		#mybox:hover
		{
		-webkit-transform: rotate(25deg);
		transform: rotate(25deg);
		}
		</style>

		</body>
		</html>
		No newline at end of file