试着写了一个前台登录窗口，想在展示的时候绕x轴以3d旋转的方式出现。旋转效果是实现了，但看着好像没有啥透视效果。记得之前修改wp主题的时候是实现过这个效果的，当真是学如逆水行舟，不进则退...退...退...
测试了几个百度搜索到的代码无果后，干脆自己手写了一个极简模型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box{
position: fixed;
width: 100%;
height: 100%;
background: gray;
display: flex;
justify-content: center;
}
.square {
width: 200px;
height: 200px;
transform: perspective(200px) rotateY(0deg);
transition: 0.5s all ease-out;
background: lightseagreen;
margin: 200px auto;
}
.square:hover {
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>好在sumlime有css属性提示，测试了小半天，最终发现是下面这排属性的问题：
transform: perspective(200px) rotateY(0deg);容易出bug之处在于，实现透视不光是要加perspective，这个属性还必须得写在rotateY之前，如果前后变换一下顺序就会丢失透视的效果。perspective的值越小，透视变形越大，值越大则透视变形越小，博主一般设置在400px~1000px之间，感觉这个范围内的动画效果看起来效果适中，不至于让人觉得被一个div呼到了脸上。
