css动画绘制3d立体按钮

Myth丶恋晨 2021-07-24 21:33 517阅读 0赞

做法:
    	在设置好平面div后,利用其前后伪类,定位到左边和下边,
    	分别设置左边向上倾斜,下面像左倾斜,最后设置整个平面倾斜增加立体感

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    			width: 400px;
    			height: 400px;
    			border: solid 1px blueviolet;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    
    		}
    		.btn{ 
    			color: white;
    			text-decoration: none;
    			width: 200px;
    			height: 40px;
    			background-color: #8A2BE2;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			position: relative;
    			transform: skew(25deg);
    			
    		}
    		
    		.btn::before{ 
    			content: '';
    			width: 10px;
    			height: 100%;
    			background-color: #8A2BE2;
    			position: absolute;
    			left: -10px;
    			transform: skewY(-45deg) translateY(5.1px);
    			border-right:solid 1px black ;
    		}
    		.btn::after{ 
    			content: '';
    			width: 100%;
    			height: 10px;
    			background-color: #8A2BE2;
    			position: absolute;
    			bottom: -10px;
    			transform: skewX(-45deg) translateX(-4px);
    			border-top:solid 1px black ;
    			border-left: solid 1px black;
    		}
    		
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<a href="" class='btn'>按钮</a>
    			
    			
    		</div>
    		
    	</body>
    </html>

效果图:  
![在这里插入图片描述][20200619204758934.png]  
原理图:  
![在这里插入图片描述][20200619204840479.png]

[20200619204758934.png]: /images/20210724/9eb3b351ed5c4ea78abba9b779c420fd.png
[20200619204840479.png]: /images/20210724/72c0e37fbeff42a69d6848c6a856f8e8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，517人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3-3D和动画

景深 > 生活中的3d 区别于2d的地方 > > 1、近大远小景深 > 程序中实现的方法 perspective 元素距离视线的距离（物体和眼睛的距离越

系统管理员/ 2023年10月06日 15:03/ 0 赞/ 4 阅读

相关 3D立体相册

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2022年12月29日 11:28/ 0 赞/ 251 阅读

相关 CSS3通过3D变换立体旋转相册

图片镇楼： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

川长思鸟来/ 2022年04月14日 02:57/ 0 赞/ 434 阅读

相关 css3 3D动画

3D 在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（）　　translateZ（）：以

た入场券/ 2021年11月29日 23:50/ 0 赞/ 504 阅读

相关 css3完成图片3d立体旋转效果

<view class="cuboidBox"> <view class="cuboidFace frontFace"><image class="mo

心已赠人/ 2021年11月29日 14:56/ 0 赞/ 664 阅读

相关 css3动画（2D）

响应式布局 1.使用相对单位 % rem vh vw 2.使用媒体查询，相当于在不同的情况下写了一套CSS样式 3.借助UI 框架，因为UI是别人封装好的响应式。

Bertha 。/ 2021年11月02日 07:06/ 0 赞/ 517 阅读

相关 css实现3D立体视频翻转动画

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一世哀愁。/ 2021年07月26日 15:35/ 0 赞/ 552 阅读

相关 CSS3 transform动画 3D旋转立体正方形

CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div，分别向前后，向左右，向上下移动相等位置，再将平面div旋转，添加animatio

「爱情、让人受尽委屈。」/ 2021年07月25日 13:57/ 0 赞/ 723 阅读

相关 css动画绘制3d立体按钮

做法: 在设置好平面div后,利用其前后伪类,定位到左边和下边, 分别设置左边向上倾斜,下面像左倾斜,最后设置整个平面倾斜增加立体感代码示例:

Myth丶恋晨/ 2021年07月24日 21:33/ 0 赞/ 517 阅读

相关 css动画 3d立体透明筛子

做法: 6个div重叠,设置旋转中心点为z轴上某一点,按水平四个面,分别按中心点旋转90度、180度、270度等,上下两个面，分别将旋转点设置在d

布满荆棘的人生/ 2021年07月24日 18:51/ 0 赞/ 503 阅读