Frontend Forever

Camera 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 Camera 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.

CAMERA DEFINITION:

A camera is an optical device used to take pictures. In their most basic form, cameras are closed containers (the camera body) with a tiny hole (the aperture) to let light in so that it can record a picture on a surface that is sensitive to light (usually photographic film or a digital sensor). Different techniques are used by cameras to regulate how light strikes the light-sensitive surface. The amount of light that enters the camera can be focused by lenses, the aperture's size can be adjusted to admit more or less light in, and the shutter mechanism controls how long the photosensitive surface is exposed to light.

HISTORY:

The Latin name for the first apparatus for projecting an image of the outside world onto a flat surface, camera obscura, which translates to "dark chamber," is where the word camera originates. The camera obscura gave rise to the contemporary photographic camera. The way a camera works is remarkably similar to the way an eye works. Joseph Nicéphore Niépce created the first ever lasting photograph in 1825.

Accessory items :

A common artificial light source in photography is the flash, which emits a brief burst of bright light during exposure. The majority of contemporary flash systems create intense light for a brief period of time (1/1,000 of a second or less) using a battery-powered high-voltage discharge through a gas-filled tube.

To help select the ideal flash duration, several flash instruments measure the light reflected from the flash. When a flash is directly connected to a camera, generally in the flash shoe or hot shoe or via a cable, opening the camera's shutter initiates the flash, and the camera's built-in light meter can help determine how long the flash will last.

Box Shadow Uses & Examples:

div {
  /* Keyword values */
  box-shadow: none;

  /* offset-x | offset-y | color */
  box-shadow: 60px -16px teal;

  /* offset-x | offset-y | blur-radius | color */
  box-shadow: 10px 5px 5px black;

  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

  /* inset | offset-x | offset-y | color */
  box-shadow: inset 5em 1em gold;

  /* Any number of shadows, separated by commas */
  box-shadow: 3px 3px red, -1em 0 0.4em olive;

  /* Global values */
  box-shadow: inherit;
  box-shadow: initial;
  box-shadow: revert;
  box-shadow: revert-layer;
  box-shadow: 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);
*{
	margin: 0;
	padding: 0;
}
body{
	background-image: url(https://www.frontendforever.com/uploads/assets/cam2.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.camera{
	position: relative;
	width: 500px;
	height: 300px;
	background: black;
	margin: 150px 350px;
	border-radius: 10px 4px 4px 10px;
	box-shadow: inset  10px 10px 18px white,inset -3px -3px 2px white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	transform-style: preserve-3d;
	transform-origin: right;
	transform: perspective(2000px) rotateY(-30deg);
	transition: 5s;
}
.camera:before{
	content: '';
	position: absolute;
}
.camera:after{
	content: '';
	position: fixed;
	top: 2px;
	height: 292px;
	width: 50px;
	right: -40px;
	background:black;
	transform: perspective(2000px) rotateY(90deg);
	border-radius: 0px 4px 4px 0px;
	box-shadow: inset 3px 3px 2px white, inset -3px -3px 2px white;
}
.camera:active{
	background: silver;
	box-shadow: none;
	border: 2px solid black;
}
.camera:active:after{
	background: silver;
	transition: 5s;
	border: 2px solid black;
}
.side{
	width: 130px;
	height: 288px;
	background: black;
	position: absolute;
	top: 1%;
	left: 50px;
	border-radius: 10px 4px 4px 10px;
	box-shadow: inset 10px 10px 20px white,inset -3px -3px 2px white;
	transform: translateZ(100px);
}
.side:before{
	content: '';
	position: absolute;
}
.side:after{
	content: '';
	position: absolute;
	left: 127px;
	height: 286px;
	top: 1px;
	width: 30px;
	right: -40px;
	background: black;
	border-radius: 0px 4px 4px 0px;
	box-shadow: inset 3px 3px 2px white, inset -3px -3px 2px white;
	border-right: 2px solid white;
	transform: perspective(2000px) rotateY(45deg) skewY(1deg);
}
.camera:active .side{
	background: silver;
	transition: 5s;
	border: 2px solid black;
}
.camera:active .side:after{
	background: silver;
	transition: 5s;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}
.lens1{
	width: 180px;
	height: 180px;
	position: absolute;
	background: black;
	opacity: .9;
	right: 10%;
	top: 20%;
	border: 2px solid white;
	border-radius: 50%;
	box-shadow: 5px 2px 1px white;
	transition: 5s;
}
.lens2{
	width: 150px;
	height: 150px;
	position: absolute;
	background: black;
	opacity: .7;
	right: 8%;
	top: 7%;
	border: 2px solid white;
	border-radius: 50%;
	box-shadow: 5px 2px 1px white;
	transform: translateX(0px) translateZ(0px);
	transition: 5s;
}
.camera:hover .lens2{
	position: absolute;
	background: black;
	width: 150px;
	height: 150px;
	left: 20px;
	opacity: 1;
	box-shadow: 5px 2px 1px white;
	transform-style: preserve-3d;
	transform: perspective(2000px) translateX(-30px) translateZ(250px);
	transition-delay: 1s;
	transition: 4s;
}
.lens3{
	width: 120px;
	height: 120px;
	position: absolute;
	background: black;
	opacity: .5;
	right: 10%;
	top: 9%;
	border: 2px solid white;
	border-radius: 50%;
	box-shadow: 5px 2px 1px white;
	transform: translateX(0px) translateZ(0px);
	transition: 5s;
}
.camera:hover .lens3{
	position: absolute;
	background: black;
	width: 120px;
	height: 120px;
	left: 20px;
	opacity: 1;
	box-shadow: 5px 2px 1px white;
	transform-style: preserve-3d;
	transform: perspective(2000px) translateX(-40px) translateZ(50px);
	transition-delay: 1s;
	transition: 1s;
}
.rect{
	width: 40px;
	height: 40px;
	position: absolute;
	top: 30%;
	left: 30%;
	border: 2px solid white;
	background: linear-gradient(90deg,black 70%,white);
}
.button{
	width: 40px;
	height: 30px;
	background: black;
	position: absolute;
	top: -10%;
	left: 10%;
	transform-style: preserve-3d;
	transform-origin: right;
	border-radius: 10px 10px 0px 0px;
	box-shadow: inset 2px 2px 3px white;
	transform: perspective(1200px);
}
.button:active{
	transform: translateY(15px);
	border-right: 2px solid black;
}
.camera:active .button{
	background: silver;
	box-shadow: inset 2px 2px 4px black;
}
h1{
	position: absolute;
	font-size: 23px;
	color: white;
	font-family: Arial;
	font-weight: bold;
	top: 10%;
	right: 54%;
}
.camera:active h1{
	color: black;
}
p{
	position: absolute;
	font-size: 15px;
	color: white;
	font-family: Arial;
	font-weight: bold;
	bottom: 5%;
	right: 14%;
}
.camera:active p{
	color: black;
}
.flash{
	width: 80px;
	height: 20px;
	background: white;
	box-shadow: inset 4px 4px 8px black;
	border-radius: 10px;
	position: absolute;
	top: 25%;
	left: 31%;
}

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

Camera Animation

About this Code

HISTORY:

Accessory items :

Box Shadow Uses & Examples:

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever