csswg/css3-transforms/examples 3d-intersection.html,NONE,1.1 3d-intersection.png,NONE,1.1 3d-rendering-context-3d.html,NONE,1.1 3d-rendering-context-3d.png,NONE,1.1 3d-rendering-context-flat.html,NONE,1.1 3d-rendering-context-flat.png,NONE,1.1

Update of /sources/public/csswg/css3-transforms/examples
In directory hutz:/tmp/cvs-serv22736/examples

Added Files:
	3d-intersection.html 3d-intersection.png 
	3d-rendering-context-3d.html 3d-rendering-context-3d.png 
	3d-rendering-context-flat.html 3d-rendering-context-flat.png 
Log Message:
2012-01-29 simon.fraser@apple.com
    Add more examples, with source files, to the 3D Rendering Context section.


--- NEW FILE: 3d-rendering-context-3d.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: 3d-intersection.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: 3d-rendering-context-flat.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: 3d-rendering-context-flat.html ---
<!DOCTYPE html>

<html
<head>
	<title>Simple 3D example</title>
	<style>
    div {
	    height: 150px; width: 150px;
	  }
	  .container {
      border: 1px solid black;
      margin: 20px;
      background-color: rgba(0, 0, 0, 0.1);
      -webkit-perspective: 500px;
      -moz-perspective: 500px;
      -ms-perspective: 500px;
      -o-perspective: 500px;
      perspective: 500px;
	  }
	  .transformed {
      -webkit-transform: rotateY(50deg);
      -moz-transform: rotateY(50deg);
      -ms-transform: rotateY(50deg);
      -o-transform: rotateY(50deg);
      transform: rotateY(50deg);
      background-color: blue;
	  }
	  .child {
      -webkit-transform-origin: top left;
      -webkit-transform: rotateX(40deg);
      -moz-transform: rotateX(40deg);
      -ms-transform: rotateX(40deg);
      -o-transform: rotateX(40deg);
      transform: rotateX(40deg);
      background-color: lime;
	  }
	</style>
</head>
<body>
  <div class="container">
    <div class="transformed">
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

--- NEW FILE: 3d-rendering-context-3d.html ---
<!DOCTYPE html>

<html
<head>
	<title>Simple 3D example</title>
	<style>
    div {
	    height: 150px; width: 150px;
	  }
	  .container {
      border: 1px solid black;
      margin: 20px;
      background-color: rgba(0, 0, 0, 0.1);
      -webkit-perspective: 500px;
      -moz-perspective: 500px;
      -ms-perspective: 500px;
      -o-perspective: 500px;
      perspective: 500px;
	  }
	  .transformed {
      -webkit-transform: rotateY(50deg);
      -moz-transform: rotateY(50deg);
      -ms-transform: rotateY(50deg);
      -o-transform: rotateY(50deg);
      transform: rotateY(50deg);
      
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;

      background-color: blue;
	  }
	  .child {
      -webkit-transform-origin: top left;
      -webkit-transform: rotateX(40deg);
      -moz-transform: rotateX(40deg);
      -ms-transform: rotateX(40deg);
      -o-transform: rotateX(40deg);
      transform: rotateX(40deg);
      background-color: lime;
	  }
	</style>
</head>
<body>
  <div class="container">
    <div class="transformed">
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

--- NEW FILE: 3d-intersection.html ---
<!DOCTYPE html>

<html
<head>
	<title>Simple 3D example</title>
	<style>
    div {
	    height: 150px; width: 150px;
	  }
	  .container {
      border: 1px solid black;
      margin: 20px;
      background-color: rgba(0, 0, 0, 0.3);
      -webkit-perspective: 500px;
      -moz-perspective: 500px;
      -ms-perspective: 500px;
      -o-perspective: 500px;
      perspective: 500px;

      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
	  }

    .container > div {
      position: absolute;
      left: 0;
    }
	  .container > :first-child {
      -webkit-transform: rotateY(45deg);
      -moz-transform: rotateY(45deg);
      -ms-transform: rotateY(45deg);
      -o-transform: rotateY(45deg);
      transform: rotateY(45deg);
      background-color: orange;
      top: 10px;
      height: 135px;
	  }

	  .container > :last-child {
      -webkit-transform: translateZ(40px);
      -moz-transform: translateZ(40px);
      -ms-transform: translateZ(40px);
      -o-transform: translateZ(40px);
      transform: translateZ(40px);
      background-color: rgba(0, 0, 255, 0.75);
      top: 50px;
      height: 100px;
	  }
	</style>
</head>
<body>
  <div class="container">
    <div></div>
    <div></div>
  </div>
</body>
</html>

Received on Sunday, 29 January 2012 11:16:26 UTC