13-3d.html（3d变形）

最新推荐文章于 2023-07-16 14:03:43 发布

jamesge2010

最新推荐文章于 2023-07-16 14:03:43 发布

阅读量241

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jamesge2010/article/details/104665905

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3d变形</title>
<style type="text/css">
	.wrap {
		width: 200px;
		height: 200px;
		border: 1px solid red;
		margin: 20px auto;
		/* 声明在3d空间展示 */
		transform-style: preserve-3d;
		/* 景深效果（近大远小） */
		perspective: 2000px;
	}
	
	.item {
		width: 100%;
		height: 100%;
		background: red;
		transition: 1s;
	}
	
	.item:hover {
		/* transform: rotateY(45deg); */
		/* 靠近500px */
		/* transform: translateZ(500px); */
		/* Z轴翻转45度 */
		/* transform: rotateZ(45deg); */
		/* （scaleZ单独使用无效果）Z轴放大20倍，Y轴翻转45度 */
		transform: scaleZ(20) rotateY(45deg);
	}
	
	
</style>


</head>
<body>
	<div class="wrap">
		<div class="item"></div>
	</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jamesge2010

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13-3d.html（3d变形）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3d变形</title><style type="text/css"> .wrap { width: 200px; height: 200px; border: 1px soli...
复制链接

扫一扫