Frontend Forever

Laptop Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Laptop Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

LAPTOP DEFINITION:

The term "laptop" or "notebook" refers to a portable computer that can be used in a variety of settings. They come with a screen, keyboard, and a mouse-replacing trackpad or trackball. Laptops contain a battery that enables them to run without being hooked to a power outlet because they are designed to be used on the road. The power adapter that lets laptops use electricity from an outlet and recharges the battery is also included.

Advances in manufacturing technology have made laptops almost as powerful as their desktop equivalents, although portable computers used to be much slower and less capable than desktop computers. High-end laptops frequently outperform entry-level or even mid-range desktop computers in terms of performance. Most laptops also have a number of I/O ports, such as USB ports, which enable the use of common keyboards and mice. Users can browse the Internet without the usage of cables thanks to the wireless networking adapter that is frequently included in modern laptops.

Although laptops can be useful and powerful, convenience frequently has a cost. The majority of laptops are significantly more expensive than a comparably equipped desktop computer with a monitor, keyboard, and mouse. Additionally, using a laptop with a small screen and keyboard for extended periods of time may be more taxing than using a desktop computer. Therefore, if portability is not a must for your computer, a desktop model can be a wiser investment.

Transform Keyword Uses & Examples

div {
  /* Keyword values */
  transform: none;

  /* Function values */
  transform: matrix(1, 2, 3, 4, 5, 6);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: perspective(17px);
  transform: rotate(0.5turn);
  transform: rotate3d(1, 2, 3, 10deg);
  transform: rotateX(10deg);
  transform: rotateY(10deg);
  transform: rotateZ(10deg);
  transform: translate(12px, 50%);
  transform: translate3d(12px, 50%, 3em);
  transform: translateX(2em);
  transform: translateY(3in);
  transform: translateZ(2px);
  transform: scale(2, 0.5);
  transform: scale3d(2.5, 1.2, 0.3);
  transform: scaleX(2);
  transform: scaleY(0.5);
  transform: scaleZ(0.3);
  transform: skew(30deg, 20deg);
  transform: skewX(30deg);
  transform: skewY(1.07rad);

  /* Multiple function values */
  transform: translateX(10px) rotate(10deg) translateY(5px);
  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

  /* Global values */
  transform: inherit;
  transform: initial;
  transform: revert;
  transform: revert-layer;
  transform: unset;
}

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background-image: url("https://www.frontendforever.com/uploads/assets/room2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.keyboard{
	width: 1000px;
	height: 100px;
	background: black;
	position: absolute;
	border-bottom: 1px solid black;
	top: 65%;
	left: 15%;
	transform-origin: bottom;
	transform-style: preserve-3d;
	transform: perspective(100px) rotateX(30deg);
}
.keyboard:before{
	content: '';
	position: absolute
}
.keyboard:after{
	content: '';
	position: absolute;
	transform-origin: top;
	width: 100%;
	height: 30px;
	bottom: -30px;
	background: black;
	transform: perspective(2000px) rotateX(-30deg);
}
.keyboard:hover{
	background: red;
}
.keyboard:hover:after{
	background: linear-gradient(90deg,blue,skyblue,blue);
}
img{
	position: absolute;
	left: 25px;
	top: 10px;
	bottom: 10px;
	width: 950px;
	height: 80px;
	transform: perspective(-500px) rotateX(-50deg);
}
.screen{
	width: 650px;
	height: 350px;
	position: relative;
	top:110px;
	left: 27.4%;
	background: black;
	background-position: center;
	background-image: url("https://www.frontendforever.com/uploads/assets/apple1.png");
	background-repeat: no-repeat;
	box-shadow: inset 5px 5px 5px white,inset -5px -5px 5px white;
	transform-origin: bottom;	
	transform: rotateX(0deg);
	transition: 5s;
	z-index: 1;
}
.front{
	width: 650px;
	height: 350px;
	position: absolute;
	top:0%;
	left: 0%;
	background: black;
	backface-visibility: hidden;
}
.screen:hover{
	transform-origin: bottom;
	transform-style: preserve-3d;
	transform: perspective(1100px) rotateX(-96deg);
	transition: 5s;
}
.display{
	position: absolute;
	width:600px; 
	height:300px;
	top:5%;
	left: 4%;
	box-shadow: inset -5px -5px 8px white,inset 5px 5px 8px white;
	backface-visibility: hidden;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Laptop Animation

About this Code

Transform Keyword Uses & Examples

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever