Understanding CSS3 – Part 3

In continuation of my blog CSS3 (Part 1 and Part 2), in this blog, i.e. `Understanding CSS3 (Part 3)’, I will elaborate on the theme of modules:

3D Transforms

Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, The below example clearly specifies how the element will rotate.

The rotateX() Method

div {
 width: 300px;
 height: 50px;
 background-color: #abad48;
 border: 1px solid black;
 }

.myDiv1 {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}
<div>
This a normal div element.
</div>
<div id=”myDiv1″ class=”myDiv1″>
Using the matrix() method.
</div>

 The rotateY() Method:

The rotateY() method rotates an element around its Y-axis at a given degree:

div {
 width: 300px;
 height: 50px;
 background-color: #abad48;
 border: 1px solid black;
 }
 .myDiv1 {
 transform: rotateY(150deg);
 }
 <div>
 This a normal div element.
 </div>
 <div id="myDiv1" class="myDiv1">
 Using the matrix() method.
 </div>

 The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

div {
 width: 200px;
 height: 50px;
 background-color: #abad48;
 border: 1px solid black;
 margin-top:5%;
 }
 .myDiv1 {
 -webkit-transform: rotateZ(90deg); /* Safari */
 transform: rotateZ(90deg);
 }
 <div>
 This a normal div element.
 </div>
 <div id="myDiv1" class="myDiv1">
 Using the matrix() method.
 </div>

 Animations:

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! Animation is process of making shape changes and creating motions with elements.

To use CSS3 animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

@keyframes slide{
 0%{
 left:0;
 top:0;
 }
 50%{
 left:244px;
 top:100px;
 }
 100%{
 left:488px;
 top:0px;
 }
 }
 .stage{
 background:#eaeaed;
 border-radius:6px;
 height:150px;
 position:relative;
 min-width:538px;
 }
 .stage:hover .ball{
 animation: slide 2s linear;
 }
 .ball{
 background:#2db34a;
 border-radius:50%;
 height:50px;
 position:absolute;
 width:50px;
 }
 <div class=”stage”><figure class=”ball”></figure></div>

 Multiple Columns

Column Count

The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the <div> element into 3 columns:

.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 }
 <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

 Column Rules

The column-rule-style property specifies the style of the rule between columns:

.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
 }
 <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

 Box Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element’s total width and height.

 .div1 {
 width: 300px;
 height: 40px;
 padding: 20px;
 border: 1px solid blue;
 }
 .div2 {
 width: 300px;
 height: 40px;
 padding: 20px;
 border: 1px solid red;
 box-sizing: border-box;
 }
 <div class="div1">TutorialsPoint.com</div></br>
 <div class="div2">TutorialsPoint.com</div>

 Media Query:

Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

/* Large Desktop*/
 @media(min-width: 1200px){
 .......
 }
 /* Portrait tablet to landscape and desktop */
 @media(min-width: 768px) and (max-width: 979px){
 .......
 }
 /* Landscape phone to portrait tablet */
 @media(max-width: 767px){
 .......
 }
 /* Landscape phones and down */
 @media(max-width: 480px){
 .......
 }