@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 4
   Tutorial Case
   
   Visual Effects Style Sheet for Photo Page at Tree and Book
   Author: Boe Mathewson
   Date:   09/22/22
   
   Filename: tb_visual2.css

*/


/* ---------Transformation Styles-------- */
article {
   /* changes the perspective depth of feild watch part 3 7:10 for example */
    /* perspective effects children of the article */
   perspective: 600px;
}

figure#figure1 {
transform: rotateX(30deg) translateZ(50px);
box-shadow: rgb(51,51,51) 0px 10px 25px;


}


figure#figure2 {
/* Transform:  rotate image    change size    move image in x direct and y direction Z=toward or away*/ 
   transform: rotate(-40deg) scale(0.8, 0.8) translate(20px, -100px) RotateZ(30deg) rotateY(60deg); 
/* box-shadow:  color              Right  Bottom blur*/   
   box-shadow: rgb(101,101,101) 10px 10px 25px;  
}
figure#figure3 {
/* Transform:  rotate image--change size of picture--move image up*/ 
   transform: rotate(10deg) scale(0.9, 0.9) translateY(-120px) rotateY(-70deg) translateZ(-20px);
/* box-shadow:  color              Right  Bottom blur*/    
   box-shadow: rgb(101,101,101) 10px -10px 25px;

}

/* ---Filter Styles---- */

  figure#figure1 {
/*                Sepia Goes 0 to 1 for a grayish brown tone effect*/
   -webkit-filter: sepia(0.8); /*recommended to be added when using filter to work in more browsers*/
   filter: sepia(0.8);
}

figure#figure2 {
   /*                grayscale Goes 0 to 1 for a grayish brown tone effect*/
      -webkit-filter: grayscale(1); /*recommended to be added when using filter to work in more browsers*/
      filter: grayscale(1);
   }

   figure#figure3 {
      /*                saturation and contrast 0 to 1 means less saturation above means more*/
         -webkit-filter: saturate(1.5) contrast(1.2); /*recommended to be added when using filter to work in more browsers*/
         filter: saturate(1.5) contrast(1.2); 
      }