Css样式--圆梯3d

最新推荐文章于 2024-01-17 11:11:32 发布

爱狗的陈十七

最新推荐文章于 2024-01-17 11:11:32 发布

阅读量190

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_44599809/article/details/103463591

版权

本文详细介绍了如何使用CSS3来创建具有立体感的3D圆台效果，包括使用transform属性设置旋转、透视，以及边框和背景颜色的设置，以达到逼真的视觉体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html long="zh">
	<head>
		<meta charset="UTF-8">
		<title>圆梯</title>
		<style type="text/css">
		    body{
		   	 	perspective:1000px;
		   	 	background:ghostwhite;
		    }
			.wrap{
				width:30px;
				height:30px;
				/*border:1px solid gold;*/
				transform-style:preserve-3d;
				margin:100px auto;
				position:relative;
				transition:30s;
			}
			.wrap:hover{
				transform:rotateY(2000deg);
			}
			.wrap div{
				width:30px;
				height:30px;
				text-align:center;
				line-height:30px;
				color:white;
				position:absolute;
				top:0;
				left:0;
				transition:5s;	
			}
			
			/*.wrap:hover*/ .call1{
				background:skyblue;
				transform:rotateY(0deg) translateY(0px) translateZ(100px);
				
			}
		/*	.wrap:hover*/ .call2{
				background:skyblue;
				transform:rotateY(30deg) translateY(10px) translateZ(100px);
			}
			/*.wrap:hover*/ .call3{
				background:skyblue;
				trans