HOME  >   CSS3 ANIMATION  >   How to Design CSS3 3D Parallax Character Portrait
How to Design CSS3 3D Parallax Character Portrait
BY Peter13 Nov,2020
Tags:

This time we share a very cool CSS3 animation. It is a 3D portrait of a parallax character, and the character's head and eyes can follow the mouse to move. If you are on a mobile device, you can also move the screen with your fingers to achieve this effect. What's more powerful is that this portrait of the character is a sketch when it is loaded, but it will gradually become an oil painting effect. You can study how this is achieved.

Advertisement

How to Design CSS3 3D Parallax Character Portrait
HTML Body Code
<main>
		<section>
			<div class="instructions">
				<div class="move-mouse">
					<img src="mouse-icon.svg" class="mouse-icon" alt="Mouse Icon" />
					<span>Move Mouse</span>
				</div>
				<div class="move-device">
					<img src="mobile-icon.svg" class="mobile-icon" alt="Mobile Icon" />
					<span>Tilt Device</span>
				</div>
			</div>

			<div class="container">
				<div class="build-layers">
					<div class="build-1"></div>
					<div class="build-2"></div>
					<div class="build-3"></div>
					<div class="build-4"></div>
					<div class="build-5"></div>
				</div>
				<div class="parallax-layers">
					<div class="face-1"></div>
					<div class="face-2"></div>
					<div class="face-3">
						<div></div>
					</div>
					<div class="face-4"></div>
					<div class="face-5"></div>
					<div class="face-6"></div>
				</div>
				<div class="splatter"></div>
			</div>
		</section>
	</main>                        
Css Code
main {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  min-width: 320px;
  min-height: 568px;
}

section {
  position: absolute;
  width: 100%;
  height: 100%;
}

.preloader-overlay {
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #181818;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
html.loading .preloader-overlay {
  opacity: 1;
}

svg.preloader-icon {
  width: 9vh;
  height: 9vh;
}                        
Js Code
var isMobile = {
	Android: function() {
		return navigator.userAgent.match(/Android/i);
	},
	BlackBerry: function() {
		return navigator.userAgent.match(/BlackBerry/i);
	},
	iOS: function() {
		return navigator.userAgent.match(/iPhone|iPad|iPod/i);
	},
	Opera: function() {
		return navigator.userAgent.match(/Opera Mini/i);
	},
	Windows: function() {
		return navigator.userAgent.match(/IEMobile/i);
	},
	any: function() {
		return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
	}
},                        

Advertisement