CSS3 三维立体文字及旋转特效_css立体字叠加

作者：小小林熬夜学编程 | 2024-02-16 21:12:39

踩

css立体字叠加


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<style type=text/css>
		body{
			background-color:#666666;
		}
		.land{
			margin:0px;
			padding:0px;
			font-size:150px;
			font-family:"微软雅黑";
			width:200px;
			height:250px;
			background-color:#888888;
			transform-style:preserve-3d;
			transform:perspective(1000px) rotateX(60deg) rotateZ(30deg);			
		}
		.centered{
			margin-left:auto;
			margin-right:auto;
		}
		.floor{
			position:absolute;
			top:25px;
			left:25px;
			width:150px;
			height:150px;
			padding:0px;
			transform-style:preserve-3d;			
			color:#cccccc;			
		}
		//堆叠10个层形成类似拉伸成立体的效果
		.floor0{
			transform:perspective(1000px) translateX(0

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/96701