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

最新推荐文章于 2024-07-06 13:17:42 发布

hi come

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量1.6k

点赞数 3

分类专栏： HTML 文章标签： HTML CSS

本文链接：https://blog.csdn.net/Alger_magic/article/details/98210165

版权

目的：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/files/cjsblog/cube03.bmp" class="pic"></div>
				<div cla

最低0.47元/天解锁文章

hi come

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTM+CSS实现立方体图片旋转展示效果

目的：HTM+CSS实现立方体图片旋转展示效果环境：系统：Win10环境：一、示例1。话不多说直接上代码<html> <head> <style> /*立方体效果*/ .wrap { width: 120px; height: 200px; margin: 20px; position: fixed; ...
复制链接

扫一扫

专栏目录