BSEB 10th result out now ! Check Now!
Home
projects

3d skeumorphism camera using html css

Minku singh
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 What is Skeumorphism ?

skeumorphism is a design concept that's use in css for styling html element and component .
skeumorphism is new and trending efect in css which provide a beeter design and looks .





in this article i will provide you source code 3d camera and transfomation of this efect . i used 3d css code and html code for this project , so read full article for sourcew code of this project 


source code of 3d camera 


 <main>
	<div class="camera" role="img" aria-label="White camera rotating left and right">
		<div class="camera__shadow"></div>
		<div class="camera__front"></div>
		<div class="camera__contents">
			<div class="camera__red-light"></div>
			<div class="camera__lens-shadow"></div>
			<div class="camera__lens-back"></div>
			<div class="camera__lens-ring">
				<div class="camera__lens-ring-glare1"></div>
				<div class="camera__lens-ring-glare2"></div>
				<div class="camera__lens-ring-glare3"></div>
			</div>
			<div class="camera__lens-inner">
				<div class="camera__lens-inner-glare1"></div>
				<div class="camera__lens-inner-glare2"></div>
				<div class="camera__lens-eye-shadow"></div>
				<div class="camera__lens-glare"></div>
				<div class="camera__lens-eye">
					<div class="camera__lens-eye-ring"></div>
					<div class="camera__lens-eye-inner-glare"></div>
					<div class="camera__lens-eye-center">
						<div class="camera__lens-eye-center-glare"></div>
					</div>
					<div class="camera__lens-eye-glass-color"></div>
					<div class="camera__lens-eye-glare"></div>
					<div class="camera__lens-eye-glass"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="camera camera--dark" role="img" aria-label="Black camera rotating left and right">
		<div class="camera__shadow"></div>
		<div class="camera__front"></div>
		<div class="camera__contents">
			<div class="camera__red-light"></div>
			<div class="camera__lens-shadow"></div>
			<div class="camera__lens-back"></div>
			<div class="camera__lens-ring">
				<div class="camera__lens-ring-glare1"></div>
				<div class="camera__lens-ring-glare2"></div>
				<div class="camera__lens-ring-glare3"></div>
			</div>
			<div class="camera__lens-inner">
				<div class="camera__lens-inner-glare1"></div>
				<div class="camera__lens-inner-glare2"></div>
				<div class="camera__lens-eye-shadow"></div>
				<div class="camera__lens-glare"></div>
				<div class="camera__lens-eye">
					<div class="camera__lens-eye-ring"></div>
					<div class="camera__lens-eye-inner-glare"></div>
					<div class="camera__lens-eye-center">
						<div class="camera__lens-eye-center-glare"></div>
					</div>
					<div class="camera__lens-eye-glass-color"></div>
					<div class="camera__lens-eye-glare"></div>
					<div class="camera__lens-eye-glass"></div>
				</div>
			</div>
		</div>
	</div>
</main>

css of this project 


* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,80%);
	--fg: hsl(var(--hue),10%,10%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1em/1.5 sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
}

/* Initial icon styles */
.camera,
.camera__red-light,
.camera__lens-ring-glare1,
.camera__lens-ring-glare2,
.camera__lens-ring-glare3,
.camera__lens-inner,
.camera__lens-inner-glare1,
.camera__lens-inner-glare2,
.camera__lens-glare,
.camera__lens-eye-ring,
.camera__lens-eye-inner-glare,
.camera__lens-eye-center,
.camera__lens-eye-center-glare,
.camera__lens-eye-glass,
.camera__lens-eye-glare {
	animation: camera 4s ease-in-out infinite;
}
.camera {
	background-color: hsl(var(--hue),10%,60%);
	border-radius: 3em;
	display: flex;
	margin: 1.5em;
	position: relative;
	width: 14em;
	height: 14em;
	transform: translateZ(0);
	transform-style: preserve-3d;
}
.camera__front,
.camera__contents,
.camera__red-light,
.camera__lens-inner,
.camera__lens-inner-glare1,
.camera__lens-inner-glare2,
.camera__lens-glare,
.camera__lens-ring,
.camera__lens-ring-glare1,
.camera__lens-ring-glare2,
.camera__lens-ring-glare3,
.camera__lens-eye,
.camera__lens-eye-shadow,
.camera__lens-eye-ring,
.camera__lens-eye-inner-glare,
.camera__lens-eye-center,
.camera__lens-eye-center-glare,
.camera__lens-eye-glass,
.camera__lens-eye-glass-color,
.camera__lens-eye-glare,
.camera__lens-shadow,
.camera__shadow {
	position: absolute;
}
.camera__red-light,
.camera__lens-back,
.camera__lens-ring,
.camera__lens-inner,
.camera__lens-inner-glare1,
.camera__lens-inner-glare2,
.camera__lens-glare,
.camera__lens-ring-glare1,
.camera__lens-ring-glare2,
.camera__lens-ring-glare3,
.camera__lens-eye,
.camera__lens-eye-shadow,
.camera__lens-eye-ring,
.camera__lens-eye-center,
.camera__lens-eye-glass,
.camera__lens-eye-glass-color {
	border-radius: 50%;
}
.camera__front {
	background-image: linear-gradient(hsl(var(--hue),10%,85%),hsl(var(--hue),10%,90%));
	border-radius: inherit;
	box-shadow: 0 0.1em 0 hsl(var(--hue),10%,95%) inset;
	width: 100%;
	height: 100%;
	transform: translateZ(1em);
	z-index: 1;
}
.camera__contents {
	top: 2.5em;
	left: 2.5em;
	width: 9em;
	height: 9em;
	transform: translateZ(1em);
	transform-style: preserve-3d;
	z-index: 2;
}
.camera__red-light {
	animation-name: cameraRedLight;
	background-color: hsl(3,90%,65%);
	box-shadow:
		0.1em -0.1em 0.1em 0.1em hsl(3,90%,50%) inset,
		0 0 0.5em 0.25em hsla(3,90%,70%,0.5);
	top: 0;
	right: 0;
	width: 0.6em;
	height: 0.6em;
}
.camera__lens-back,
.camera__lens-ring,
.camera__lens-inner {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.camera__lens-back {
	background-color: hsl(var(--hue),10%,70%);
	transform: translateZ(0.01em);
}
.camera__lens-ring {
	background-color: hsl(var(--hue),10%,45%);
	border-radius: 50%;
	overflow: hidden;
	transform: translateZ(1.5em);
}
.camera__lens-ring-glare1 {
	animation-name: cameraRingGlare1;
	background-image: radial-gradient(100% 100% at center,hsl(0,0%,100%) 25%,hsla(0,0%,100%,0) 50%);
	bottom: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform-origin: 0 50%;
}
.camera__lens-ring-glare2 {
	animation-name: cameraRingGlare2;
	background-image: radial-gradient(100% 100% at center,hsl(var(--hue),10%,85%) 30%,hsla(var(--hue),10%,85%,0) 50%);
	top: 30%;
	right: 30%;
	width: 140%;
	height: 140%;
}
.camera__lens-ring-glare3 {
	animation-name: cameraRingGlare3;
	background-image: radial-gradient(100% 100% at center,hsl(var(--hue),10%,70%) 30%,hsla(var(--hue),10%,70%,0) 50%);
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
}
.camera__lens-inner {
	animation-name: cameraLensInner;
	background-color: hsl(var(--hue),10%,65%);
	box-shadow: 0 0 0 0.125em hsl(var(--hue),10%,50%);
	top: 0.5em;
	left: 0.5em;
	width: 8em;
	height: 8em;
	transform: translateZ(1.5em);
}
.camera__lens-inner-glare1 {
	animation-name: cameraLensInnerGlare1;
	box-shadow: 0.5em -1em 0.5em 0.5em hsl(var(--hue),10%,85%) inset;
	opacity: 0;
	width: 100%;
	height: 100%;
}
.camera__lens-inner-glare2 {
	animation-name: cameraLensInnerGlare2;
	border: 1em solid hsl(var(--hue),10%,85%);
	border-bottom: 1em solid transparent;
	filter: blur(4px);
	opacity: 0.5;
	top: 0.6em;
	left: 0.6em;
	width: 6.8em;
	height: 6.8em;
	transform: rotate(-45deg);
}
.camera__lens-glare {
	animation-name: cameraLensGlare;
	background-image: radial-gradient(100% 100% at center,hsl(0,0%,100%) 15%,hsla(0,0%,100%,0) 50%);
	top: 4em;
	left: 3em;
	width: 2em;
	height: 0.875em;
	transform: rotate(0) translateY(2.5em);
}
.camera__lens-eye,
.camera__lens-eye-shadow {
	top: 1.5em;
	left: 1.5em;
	width: 5em;
	height: 5em;
	transform: translateZ(0);
}
.camera__lens-eye {
	background-color: hsl(var(--hue),10%,10%);
	box-shadow: 0 0 0 0.0625em hsl(var(--hue),10%,10%);
	overflow: hidden;
}
.camera__lens-eye-shadow {
	box-shadow: 0 0 0.375em 0.25em hsl(var(--hue),10%,50%);
}
.camera__lens-eye-ring {
	animation-name: cameraEyeRing;
	box-shadow:
		0 0 0 0.25em hsl(0,0%,0%),
		0 0 0.25em 0.5em hsl(var(--hue),10%,25%),
		0 -0.25em 0.25em 0.5em hsl(var(--hue),10%,20%),
		0 0.2em 0.125em hsl(var(--hue),10%,40%) inset;
	top: 1em;
	left: 1em;
	width: 3em;
	height: 3em;
}
.camera__lens-eye-inner-glare {
	animation-name: cameraEyeInnerGlare;
	background-color: hsl(var(--hue),10%,35%);
	border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
	box-shadow: 0 0 0.375em 0.25em hsl(var(--hue),10%,35%);
	top: 3em;
	left: 1.75em;
	width: 1.5em;
	height: 0.5em;
	opacity: 0;
	transform: scale(0);
}
.camera__lens-eye-center {
	background-image: linear-gradient(hsl(123,90%,5%) 45%,hsl(123,90%,15%) 75%);
	box-shadow: 0 0 0.125em 0.25em hsl(0,0%,0%);
	overflow: hidden;
	top: 2.125em;
	left: 2.125em;
	width: 0.75em;
	height: 0.75em;
}
.camera__lens-eye-center-glare {
	animation-name: cameraEyeCenterGlare;
	background-color: hsl(123,10%,35%);
	border-radius: 50%;
	top: 0;
	right: 0;
	width: 0.3em;
	height: 0.3em;
}
.camera__lens-eye-glass {
	animation-name: cameraEyeGlass;
	box-shadow:
		0 -0.1em 0.1em hsl(63,90%,20%) inset,
		0 0 0.125em hsl(3,90%,20%) inset,
		0 0 0.125em hsl(263,90%,40%) inset,
		0 0 0.125em 0.25em hsl(0,0%,0%) inset;
	width: 100%;
	height: 100%;
}
.camera__lens-eye-glass-color {
	background-image: linear-gradient(hsla(253,90%,10%,0.5) 60%,hsla(253,90%,40%,0.5) 60%);
	width: 100%;
	height: 100%;
}
.camera__lens-eye-glare {
	animation-name: cameraEyeGlare;
	background-color: hsla(223,90%,60%,0.7);
	border-radius: 50%;
	box-shadow: -0.125em 0.375em 0.5em hsl(268,90%,50%) inset;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	transform: translateX(0) rotate(45deg) scaleY(0.45);
}
.camera__lens-shadow {
	background-image: linear-gradient(135deg,hsla(var(--hue),50%,0%,0.25),hsla(var(--hue),50%,0%,0));
	filter: blur(4px);
	top: 50%;
	left: 0;
	width: 100%;
	height: 7em;
}
.camera__shadow {
	background-image: linear-gradient(90deg,hsla(var(--hue),50%,0%,0.5),hsla(var(--hue),50%,0%,0.1));
	border-radius: 40%;
	filter: blur(1px);
	top: calc(100% - 1em);
	width: 100%;
	height: 1em;
	transform: translateZ(-0.01em);
}

/* Dark icon styles */
.camera--dark {
	background-color: hsl(var(--hue),10%,10%);
}
.camera--dark .camera__front {
	background-image: linear-gradient(hsl(var(--hue),10%,15%),hsl(var(--hue),10%,20%));
	box-shadow: 0 0.1em 0 hsl(var(--hue),10%,25%) inset;
}
.camera--dark .camera__red-light {
	box-shadow:
		0.1em -0.1em 0.1em 0.1em hsl(3,90%,50%) inset,
		0 0 0.5em 0.25em hsla(3,90%,50%,0.5);
}
.camera--dark .camera__lens-back {
	background-color: hsl(var(--hue),10%,10%);
}
.camera--dark .camera__lens-inner {
	background-color: hsl(var(--hue),10%,5%);
}
.camera--dark .camera__lens-inner-glare1 {
	box-shadow: 0.5em -1em 0.5em 0.5em hsl(var(--hue),10%,25%) inset;
}
.camera--dark .camera__lens-inner-glare2 {
	border: 1em solid hsl(var(--hue),10%,25%);
	border-bottom: 1em solid transparent;
}
.camera--dark .camera__lens-glare {
	background-image: radial-gradient(100% 100% at center,hsl(var(--hue),10%,70%) 15%,hsla(var(--hue),10%,70%,0) 50%);
}
.camera--dark .camera__lens-eye-shadow {
	box-shadow: 0 0 0.375em 0.25em hsl(var(--hue),10%,2);
}

/* Dark page theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,30%);
		--fg: hsl(var(--hue),10%,90%);
	}
}

/* Beyond mobile */
@media (min-width: 768px) {
	main {
		flex-direction: row;
	}
}

/* Animations */
@keyframes camera {
	from,
	to {
		transform: rotateY(20deg);
	}
	50% {
		transform: rotateY(-20deg);
	}
}
@keyframes cameraRedLight {
	from,
	to {
		transform: translateZ(0.6em) rotateY(-20deg);
	}
	50% {
		transform: translateZ(0.6em) rotateY(20deg);
	}
}
@keyframes cameraRingGlare1 {
	from,
	to {
		transform: translateX(-25%) scaleX(0.33);
	}
	50% {
		transform: translateX(0) scaleX(1);
	}
}
@keyframes cameraRingGlare2 {
	from,
	to {
		transform: scale(0.75);
	}
	50% {
		transform: scale(1.25);
	}
}
@keyframes cameraRingGlare3 {
	from,
	to {
		transform: translateX(-20%) scale(0.75);
	}
	50% {
		transform: translateX(0) scale(1.2);
	}
}
@keyframes cameraLensInner {
	from,
	to {
		box-shadow: 0.0625em 0 0 0.125em hsl(var(--hue),10%,50%);
	}
	50% {
		box-shadow: -0.0625em 0 0 0.125em hsl(var(--hue),10%,50%);
	}
}
@keyframes cameraLensInnerGlare1 {
	from,
	to {
		opacity: 1;
		transform: rotate(0);
	}
	50% {
		opacity: 0;
		transform: rotate(45deg);
	}
}
@keyframes cameraLensInnerGlare2 {
	from,
	to {
		opacity: 0.2;
		transform: translate(0,0.2em) scale(1.1) rotate(-45deg);
	}
	50% {
		opacity: 1;
		transform: translate(0,0) scale(1) rotate(-15deg);
	}
}
@keyframes cameraLensGlare {
	from,
	to {
		transform: rotate(-25deg) translateY(2.5em);
	}
	50% {
		transform: rotate(25deg) translateY(2.5em);
	}
}
@keyframes cameraEyeInnerGlare {
	from,
	to {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0;
		transform: scale(0);
	}
}
@keyframes cameraEyeCenterGlare {
	from,
	to {
		transform: translateX(-25%);
	}
	50% {
		transform: translateX(50%);
	}
}
@keyframes cameraEyeGlass {
	from,
	to {
		box-shadow:
			-0.1em -0.1em 0.1em hsl(63,90%,20%) inset,
			-0.2em -0.1em 0.125em hsl(3,90%,20%) inset,
			-0.3em -0.3em 0.125em hsl(263,90%,40%) inset,
			0 0 0.125em 0.25em hsl(0,0%,0%) inset;
	}
	50% {
		box-shadow:
			0.1em -0.1em 0.1em hsl(63,90%,20%) inset,
			0.2em -0.1em 0.125em hsl(3,90%,20%) inset,
			0.3em -0.3em 0.125em hsl(263,90%,40%) inset,
			0 0 0.125em 0.25em hsl(0,0%,0%) inset;
	}
}
@keyframes cameraEyeGlare {
	from,
	to {
		transform: translateX(-0.75em) rotate(10deg) scale(1.5,1);
	}
	50% {
		transform: translateX(0.375em) rotate(50deg) scale(1.5,0.25);
	}
}
@keyframes cameraEyeRing {
	from,
	to {
		box-shadow:
			0 0 0 0.25em hsl(0,0%,0%),
			0 0.25em 0.25em 0.5em hsl(var(--hue),10%,25%),
			0 -0.25em 0.25em 0.5em hsl(var(--hue),10%,20%),
			0 0.2em 0.125em hsl(var(--hue),10%,40%) inset;
	}
	50% {
		box-shadow:
			0 0 0 0.25em hsl(0,0%,0%),
			0 0 0.25em 0 hsl(var(--hue),10%,25%),
			0 -0.25em 0.25em 0.5em hsl(var(--hue),10%,20%),
			0 0.2em 0.125em hsl(var(--hue),10%,40%) inset;
	}
}
A 3D CSS transform refers to a technique in web development that allows you to apply transformations to elements in three-dimensional space using CSS (Cascading Style Sheets). It enables you to manipulate elements by translating (moving), rotating, scaling, and skewing them in three dimensions. CSS 3D transforms utilize the transform property along with specific functions to achieve various 3D effects. The most commonly used functions for 3D transformations are: translate3d(x, y, z): Translates an element along the x, y, and z axes. rotateX(angle), rotateY(angle), rotateZ(angle): Rotates an element around the x, y, or z axis by the specified angle. scale3d(x, y, z): Scales an element in the x, y, and z directions. skewX(angle), skewY(angle): Skews an element along the x or y axis by the specified angle. perspective(value): Defines the perspective from which an element is viewed.
Go to Link

About the Author

Minku singh
Hello my name is Minku singh and i am a part time blogger since 2020.Web devloper minku singh. web dev minku . Minku Singh
#projects

Post a Comment

Thanks for commenting on our website . I hope your issue has solve as soon as possible
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.