css 3D盒子动画

最新推荐文章于 2023-10-06 10:55:50 发布

chenqiong1991

最新推荐文章于 2023-10-06 10:55:50 发布

阅读量1k

点赞数 2

分类专栏：学习笔记 css

本文链接：https://blog.csdn.net/chenqiong1991/article/details/86592083

版权

学习笔记同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

翻转盒子放在父容器中，触发动画的hover绑定在父容器上。否则，在360、搜狗等浏览器中，直接给3D盒子绑定hover，会出现抖动现象。
本例子中，div为盛放3D盒子的父容器，且设置perspective属性，以获得更好的3D透视效果。同时，这会导致盒子翻转后大小会发生变化，再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。
主要通过::before伪属性给盒子添加侧面，通过定位使其放置在正面的正下方，再旋转使其垂直于正面（需要设置transform-origin: 50% 0;从而以y轴0刻度处为旋转中心）
给div绑定div:hover ，它的子元素span的transform属性发生变化，从而进行翻转动作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div>
		<span data-hover="绿杨阴里白沙堤">绿杨阴里白沙堤</span>
	</div>
	
	<div>
		<span data-hover="素衣莫起风尘叹">素衣莫起风尘叹</span>
	</div>

	<div>
		<span data-hover="天阶月色凉如水">天阶月色凉如水</span>
	</div>

	<div>
		<span data-hover="一片冰心在玉壶">一片冰心在玉壶</span>
	</div>


	<style type="text/css" media="screen">

		div{
			display: inline-block;
			perspective: 200px;
			margin: 30px 20px;
			color: #fff;
			letter-spacing: 1px;
		}

		span {
			background: #2195de;
			transition: transform 0.75s;
			transform-origin: 50% 0;
			transform-style: preserve-3d;
			display: inline-block;
			line-height: 50px;
			padding: 0 15px;
		}

		span::before {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: 100%;
			background: #ff65a0;
			content: attr(data-hover);
			padding: 0 15px;
			box-sizing: border-box;
			transition: background 0.75s;
			transform: rotateX(-90deg);
			transform-origin: 50% 0;
		}

		div:hover span{
			transform: rotateX(90deg) translate3d(0,-50px,0);
		}

		div:hover span::before{
			background: #00a5a0;
		}


	</style>
</body>
</html>

chenqiong1991

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 3D盒子动画

翻转盒子放在父容器中，触发动画的hover绑定在父容器上。否则，在360、搜狗等浏览器中，直接给3D盒子绑定hover，会出现抖动现象。本例子中，div为盛放3D盒子的父容器，且设置perspective属性，以获得更好的3D透视效果。同时，这会导致盒子翻转后大小会发生变化，再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。主要通过::before伪...
复制链接

扫一扫