翻转的文字立体设计

最新推荐文章于 2024-05-29 11:20:39 发布

张卜bu

最新推荐文章于 2024-05-29 11:20:39 发布

阅读量257

点赞数

文章标签：立体翻转文字设计与实现

本文链接：https://blog.csdn.net/weixin_42596234/article/details/84201440

版权

翻转的文字立体设计：
设计的基本思路：通过div的嵌套实现。利用嵌套，添加鼠标的出发事件。当鼠标移入到div中的时候，我们可以旋转上层div并添加上层div的文本样式来实现一个3D的立体效果。
具体的设计代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tao1{
				width: 900px;
				height: 200px;
				/*border: solid 1px blue;*/
				/*background: blue;*/
				margin: 100px auto;
				position: relative;
				
			}
		
			.bigdiv,.bigdiv01{
				position: absolute;
				/*border: solid 1px navy;*/

			}
		
			.bigdiv>div{
				font-size: 100px;
				float: left;
				margin: 35px;
				color:black;

			}
			.bigdiv01>div{
				font-size: 100px;
				float: left;
				margin: 35px;
				color:red;
				transition: all 1s linear;
				text-shadow: 5px 5px 5px black;
			}
			
			
			.bigdiv01:hover div{
				transform-origin: left;
				transform: rotateY(45deg);
				text-shadow: 10px 10px 3px black;
				
			}