----------------------------页面效果图------------------------------
截图1：
截图2：
----------------------------具体代码实现-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D折纸</title>
<style>
html,body{margin: 0;padding: 0;height:100%}
body{
display: flex;
/**
* align-items 弹性盒子
* justify-content 弹性盒子
*/
align-items: center;
justify-content: center;
background-color: #FFF;
}
p{
color: #FFF;
font-size: 1em;
font-weight: bold;
font-family: "微软雅黑";
}
/**
* 3D效果
* 1.transform-style: preserve-3d;
* 3.: 是c2的 ：：是委元素 c3提供
*/
p span{
display: inline-block;
position: relative;
transform-style: preserve-3d;
perspective: 500;
}
p span::before,p span::after{
display: none;
position: absolute;
top: 0;
left: -1px;
/**设置旋转中心点*/
transform-origin: left top;
transition: all ease-out 0.3s;
content: attr(data-text);/**data-text 的值可以付给content*/
}
p span::before{
z-index: 1;
color: rgba(0,0,0,0.2);
transform: scale(1.1,1) skew(0deg,20deg);
}
p span::after{
z-index: 2;
color: #684DA3;
text-shadow: -1px 0 1px #684DA3,1px 0 1px rgba(0,0,0,0.8);
transform: rotateY(-40deg);
}
p span:hover::before{
transform: scale(1.1,1) skew(0deg,5deg);
}
p span::after{
transform: rotateY(-10deg);
}
/**span+span 第一个span没有边距，第二个有边距*/
p span+span{
margin-left: 0.1em;
}
/**查询媒体的宽度 min-640px*/
@media (min-20em ) {
p{font-size: 2em;}
p span::before,p span::after{
display: block;
}
}
/**查询媒体的宽度 min-640px*/
@media (min-30em ) {
p{font-size: 3em;}
}
/**查询媒体的宽度 min-640px*/
@media (min-40em ) {
p{font-size: 4em;}
}
/**查询媒体的宽度 min-640px*/
@media (min-60em ) {
p{font-size: 8em;}
}
</style>
</head>
<body>
<p>
<span data-text="亲">亲</span>
<span data-text="爱">爱</span>
<span data-text="的">的</span>
<span data-text="，">，</span>
<span data-text="歇">歇</span>
<span data-text="会">会</span>
<span data-text="儿">儿</span>
<span data-text="吧">吧</span>
</p>
</body>
</html>