制作立方体相册

主要实现的功能是一个正方体的六个面为六张照片 利用CSS3中的动画属性来让他旋转,下面上代码

	<body>
		<div class="box">
			<div class="photo1">div>
			<div class="photo2">div>
			<div class="photo3">div>
			<div class="photo4">div>
			<div class="photo5">div>
			<div class="photo6">div>
		div>
	body>

HTML部分搭建结构就可以了

		/* 设置根标签就是html为满屏 */
			:root{
				height: 100%;
			}
			/* 设置body为100% 并设置视觉穿透,观察原点 , 过渡效果为3d */
			body{
				height: 100%;
				margin: 0;
				perspective: 8000px;
				perspective-origin: 600px 600px;
				transform-style: preserve-3d;
			}
			/* 为box设置屏幕居中 并添加一个自转的动画效果 */
			.box{
				width: 400px;
				height: 400px;
				position: absolute;
				top: calc(50% - 200px);
				left: calc(50% - 200px);
				transform-style: preserve-3d;
				animation: rotate 8s linear infinite ;
			}
			/* 为每一张照片设置大小以及透明度 , 这样看上去会有透视的感觉 */
			.box div{
				width: 400px;
				height: 400px;
				position: absolute;
				opacity: .9;
				background-size: cover;
				background-position: center;
			}
			/* 定义自转动画从0到360°自转 */
			@keyframes rotate {
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}
				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			/* 下面的六张图片单独说 */
			.photo1{
				background-image: url('img/photo-of-hands-with-blue-veins-3462741 (1).jpg');
				transform:translateZ(200px);
				
			}
			.photo2{
				background-image: url('img/woman-wearing-white-shirt-3325917.jpg');
				transform:translateZ(-200px);
			}
			.photo3{
				background-image: url('img/quote-text-wallpaper-the-smiths-3330655.jpg');
				transform:rotateY(90deg) translateZ(200px);
			}
			.photo4{
				background-image: url('img/woman-wearing-make-up-and-black-contact-lens-3414766.jpg');
				transform: rotateY(-90deg) translateZ(200px);
			}
			.photo5{
				background-image: url('img/woman-s-face-3400813.jpg');
				transform:rotateX(90deg) translateZ(200px);
			}
			.photo6{
				background-image: url('img/sunset-art-light-bulb-upside-down-3402687.jpg');
				transform: rotateX(-90deg) translateZ(200px);
			}

CSS大部分解释都已经卸载注释中 , 这里单独拿出来说一下重点 :

  • 为 html 和 body 设置高度为100%
  • 观察原点最好设置在立方体中心
  • 为图片添加透明度增强视觉效果
  • 每张图片的选转 以z移动则为上下面 , 加上rotate则改变他的四周面

制作立方体相册_第1张图片


如有错误,请指正!

你可能感兴趣的:(制作立方体相册)