css动画属性实现3d效果立体盒子效果

最新推荐文章于 2022-01-29 17:42:03 发布

qq_29319817

最新推荐文章于 2022-01-29 17:42:03 发布

阅读量2.9k

点赞数

分类专栏：前端蜗牛爬行记 css 文章标签： css动画 3d css3动画属性 css3动画效果 animation属性

本文链接：https://blog.csdn.net/qq_29319817/article/details/76407104

版权

前端蜗牛爬行记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

前言

今天总结了css动画属性相关知识，也写了一些前言，现在不说不多bb了。主要是为对先前总结的知识（css动画属性大集合），来个小demo来加深印象。

主要知识点

1.在祖先元素设置井深属性-perspective

2.为需要实现3d变形转换的元素设置3d场景：transform-style: preserve-3d;

效果图如下：

实现代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.box{
			width: 100px;
			height:100px;
			margin:40px auto;
			/*设置井深、透视*/
			perspective: 500px;
			/*perspective-origin: top;*/
		}
		.cube{
			width: 100px;
			height: 100px;
			position: relative;
			transform-style: preserve-3d;
			animation: wrap 3s 5s infinite forwards;
		}
		@keyframes wrap{
			to{
				transform:rotate3d(1,1,1,360deg);
			}
		}
		.item{
			width:100px;
			height: 100px;
			background:rgba(255,255,0,.5);
			font-size:80px;
			text-align:center;
			line-height: 100px;
			position: absolute;
			top:0;
			left: 0;
			transform-style: preserve-3d;
		}
		.item1{
			z-index: 5;
			animation: item1 1s forwards;
		}
		@keyframes item1{
			to{
				transform-origin: top;
				transform: rotateX(90deg);
			}
		}
		.item2{
			z-index: 4;
			animation: item2 1s 1s forwards;
		}
		@keyframes item2{
			to{
				transform-origin: left;
				transform: rotateY(-90deg);
			}
		}
		.item3{
			z-index: 3;
			animation: item3 1s 2s forwards;
		}
		@keyframes item3{
			to{
				transform-origin: right;
				transform: rotateY(90deg);
			}
		}
		.item4{
			z-index: 2;
			animation: item4 1s 3s forwards;
		}
		@keyframes item4{
			to{
				transform-origin: center bottom;
				transform: rotateX(-90deg);
			}
		}
		.item5{
			z-index: 1;
			animation: item5 1s 4s forwards;
		}
		@keyframes item5{
			to{
				transform: translate3d(0,0,100px);
			}
		}
		.item6{
			z-index: 0;
		}


	</style>
</head>
<body>
	<div class="box">
		<div class="cube">
			<div class="item1 item">1</div>
			<div class="item2 item">2</div>
			<div class="item3 item">3</div>
			<div class="item4 item">4</div>
			<div class="item5 item">5</div>
			<div class="item6 item">6</div>
		</div>
	</div>
</body>
</html>

生活寄语

爱代码，爱上生活！

qq_29319817

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css动画属性实现3d效果立体盒子效果

前言今天总结了css动画属性相关知识，也写了一些前言，现在不说不多bb了。主要是为对先前总结的知识（css动画属性大集合），来个小demo来加深印象。主要知识点1.在祖先元素设置井深属性-perspective2.为需要实现3d变形转换的元素设置3d场景：transform-style: preserve-3d;效果图如下：实现代码如下：
复制链接

扫一扫