【知了堂学习笔记】css3 transform 3d制作字母开门3D效果

最新推荐文章于 2023-01-04 15:09:53 发布

JALex0

最新推荐文章于 2023-01-04 15:09:53 发布

阅读量819

点赞数 2

分类专栏： css3 文章标签： css3 3d

本文链接：https://blog.csdn.net/JALex0/article/details/77779730

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过css3选择器:hover及一些过渡效果来实现鼠标移入字母往左边开门的效果。

：hover是一个伪类，是鼠标指针移到元素的上面

transition是css3里面的过渡效果，是一种样式变化成另一种效果

transform是对内容进行旋转，旋转分为2D和3D的，旋转可以沿着X轴或Y轴及Z轴进行旋转。

transform:rotateY(-40deg); 在括号里面跟的是一个度数，实现内容的旋转，

下面是html代码：

<!DOCTYPEhtml>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>Document</title>
       <link rel="stylesheet"type="text/css" href="css/demo.css">
</head>
<body>
       <div class="container">
              <div class="component">
                     <ul>
                            <li class="left"><span data="C">C</span></li>
                           
                            <li class="left"><span data="A">A</span></li>
                           
                            <li class="left"><span data="Q">Q</span></li>
                     </ul>
              </div>
       </div>
</body>
</html>

可以看到网页的内容是非常简单的，就是一个div里面加了一个无序列表和span标签。

静态图片：

Css样式代码：

*{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.component ul{
	width: 100%;
	height: 500px;
	float: left;
	font-size: 13em;
	overflow: hidden;
	/*border:1px solid #000;*/
}
.component ul li{
	width:220px;
	float: left;
	text-align: center;
	margin-left: 10px;
	background: #2e9898;
	/*border:1px solid #000;*/
}
.component ul span{
	position: relative;
	display: inline-block;
	font-weight: 900;
	transform-style:preserve-3d;
	perspective: 550px;

}
.component ul li span:after {
	content: attr(data);
	line-height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	color: #2b7672;
	transition: all .3s;
	transform-origin: 0 50%;
	transform: rotateY(-12deg);
	text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
}

一点小思路及用到的知识点：

首先我们需要对ul标签里的内容进行一些简单的设置。静态页面的设置，通过一个：after这个伪类实现了一个遮罩层，肉眼看到的以为是一个大的字母，其实这是两个一样的字母，通过定位后，他们的位置一样，所以重合了。

这里值得关注的是 content: attr(data);的用法，他是通过attr从页面里面提取内容，data定义了一个值就是和span标签里的字母一样，content把attr提取的内容显示出来。

transform-origin 允许被转换元素的位置，配合transform:rotateY（）来进行设置的，

可以将元素的位子进行调动。

最后用了一个阴影效果，到达在进行开门的时候能够更加明显。

text-shadow 是实现文字阴影效果，

h-shadow 水平阴影的位置

v-shadow 垂直阴影的位置

blur 模糊的距离

color 颜色

可以设置多重的阴影每个阴影用逗号隔开

Css动效代码：

.left:hover span:after {
	color: #bddebf;
	transform: rotateY(-40deg);
}

其实动效没什么,就是鼠标在移入的时候改变颜色，以方便观看变化，以及对内容进行了一个旋转，就达到了开门的效果。

JALex0

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【知了堂学习笔记】css3 transform 3d制作字母开门3D效果

通过css3选择器:hover及一些过渡效果来实现鼠标移入字母往左边开门的效果。：hover是一个伪类，是鼠标指针移到元素的上面 transition是css3里面的过渡效果，是一种样式变化成另一种效果 transform是对内容进行旋转，旋转分为2D和3D的，旋转可以沿着X轴或Y轴及Z轴进行旋转。 transform:rotateY(-40deg)
复制链接

扫一扫