css3动画实现简单的立方体效果

最新推荐文章于 2023-03-13 22:43:54 发布

眉间是银河

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/weixin_42242810/article/details/80375633

版权

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>空间立方体旋转</title>
	<style type="text/css">
	body{
		background: pink;
	}
	
		.box{
			width: 300px;
			height: 300px;
			margin: 300px auto 0;
			position: relative;
			transform-style: preserve-3d;
			transform:rotateY(30deg) rotateX(24deg);
			perspective: 2000px;
			animation: box_ani 10s infinite linear;
		}
		.box img{
			display: block;
			width: 300px;
			height: 300px;
			line-height: 300px;
			text-align: center;
			color: #fff;
			text-decoration:none;
			font-size: 32px;

			opacity: .7;
			position:absolute;
			left: 0;
			top:0;
			transform-style: preserve-3d;
			transition: all 1s;
		}
		.box>img:nth-child(1){
			transform:translateZ(-150px);
		}
		.box>img:nth-child(2){
			transform: translateZ(150px);
		}
		.box>img:nth-child(3){
			background: red;
			transform: rotateY(-90deg) translateZ(150px);
		}
		.box>img:nth-child(4){
			background: red;
			transform: rotateY(90deg) translateZ(150px);
		}
		.box>img:nth-child(5){
			background: red;
			transform: rotateX(90deg) translateZ(150px);
		}
		.box>img:nth-child(6){
			background: red;
			transform: rotateX(-90deg) translateZ(150px);
		}
		@keyframes box_ani{
			0%{
				transform: rotateX(0deg) rotateY(0deg);
			}
			100%{
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
		.box:hover>img:nth-child(1){
			transform:translateZ(-210px);
		}
		.box:hover>img:nth-child(2){
			transform:translateZ(180px);
		}
		.box:hover>img:nth-child(3){
			transform: rotateY(-90deg) translateZ(210px);
		}
		.box:hover>img:nth-child(4){
			transform: rotateY(90deg) translateZ(210px);
		}
		.box:hover>img:nth-child(5){
			transform: rotateX(90deg) translateZ(210px);
		}
		.box:hover>img:nth-child(6){
			transform: rotateX(-90deg) translateZ(210px);
		}
		.sm_box img{
			display: block;
			width: 200px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			color: #fff;
			text-decoration:none;
			font-size: 32px;
			position:absolute;
			left: 50px;
			top:50px;
			transform-style: preserve-3d;
		}

		.sm_box img:nth-child(1){
			background:blue;
			transform:translateZ(100px);
		}
		.sm_box img:nth-child(2){
			background:blue;
			transform:translateZ(-100px);
		}
		.sm_box img:nth-child(3){
			background: red;
			transform: rotateY(-90deg) translateZ(100px);
		}
		.sm_box img:nth-child(4){
			background: red;
			transform: rotateY(90deg) translateZ(100px);
		}
		.sm_box img:nth-child(5){
			background: red;
			transform: rotateX(90deg) translateZ(100px);
		}
		.sm_box img:nth-child(6){
			background: red;
			transform: rotateX(-90deg) translateZ(100px);
		}
		.box:hover{
			animation: box_ani 5s infinite linear paused;


		}
		. 

	</style>
</head>
<body>
	<div class="box">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
			<img src="img/6.jpg" />
		<div class="sm_box">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
			<img src="img/6.jpg" />
		</div>
	</div>
</body>
</html>

效果图如下：

眉间是银河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画实现简单的立方体效果

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;空间立方体旋转&lt;/title&gt; &lt;style type="text/css"&gt; body{ backgr
复制链接

扫一扫