HTM+CSS实现立方体图片旋转展示效果

最新推荐文章于 2021-06-07 11:07:57 发布

原创

最新推荐文章于 2021-06-07 11:07:57 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

目的：HTM+CSS实现立方体图片旋转展示效果

环境：

系统：Win10
环境：

一、示例1。

话不多说直接上代码

<html>
	<head>
		<style>
			/*立方体效果*/
			.wrap {
			width: 120px;
			height: 200px;
			margin: 20px;
			position: fixed;
			top: 100px;
			left: 200px;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			z-index: 22;
			}

			.cube {
			width: 120px;
			height: 120px;
			margin: 0 auto;
			transform-style: preserve-3d;
			transform: rotateX(-30deg) rotateY(-80deg);
			animation: rotate linear 20s infinite;
			}

			@-webkit-keyframes rotate {
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}
				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}

			.cube div {
				position: absolute;
				width: 120px;
				height: 120px;
				opacity: 0.8;
				transition: all .4s;
			}

			.cube .out_front {
				transform: rotateY(0deg) translateZ(60px);
			}

			.cube .out_back {
				transform: translateZ(-60px) rotateY(180deg);
			}

			.cube .out_left {
				transform: rotateY(-90deg) translateZ(60px);
			}

			.cube .out_right {
				transform: rotateY(90deg) translateZ(60px);
			}

			.cube .out_top {
				transform: rotateX(90deg) translateZ(60px);
			}

			.cube .out_bottom {
				transform: rotateX(-90deg) translateZ(60px);
			}
		</style>
	</head>
	
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
				<div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
				<div class="out_left"><img src="https://files-cdn.cnblogs.com