首页>建站相关>关于css的三维旋转rotateX,rotateY,rotateZ
关于css的三维旋转rotateX,rotateY,rotateZ
试着写了一个前台登录窗口，想在展示的时候绕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呼到了脸上。
标签: css
移动端可扫我直达哦~
推荐阅读
2025-03-02
现象当盒子容器中中包含img元素时，如果连接区域对比度较高的情况下，会发现父元素的高度比img图片的高度多出3px，容器底部有一条明显的白边。<div>
<img src=" ">
...
建站相关
css
2025-03-02
很多自适应的主题，在手机端都是选择把菜单栏隐藏在侧面，按需调用。调用的时候往往页面会显示一个遮罩，屏蔽掉了其他不相关元素的点击，但遮罩上即便设置了overflow属性，也无法阻挡背景body自由翻滚的热情。这个时候可以考虑给body临...
建站相关
css
2025-02-28
想问导航条增加一个滚动动画，向下滚动一段之后调整导航条高度，结果效果是有了，一看盒子高度先上去了，菜单栏却慢吞吞的隔了很久才到位，像极了工作摸鱼的打工人，盲目的调整了很久，最后发现是各部件动画持续时间不一致的问题。同一个模块中的零件，...
建站相关
css
2024-10-23
之前翻阅wordpress默认主题的时候，看到主题的打印设置占了很大的篇幅，嫌太麻烦所以直接跳过了。这几天想要打印一份博客上的内容，觉得页眉侧栏以及页尾都有点多余，只需要打印博文部分的内容就可以了。于是只能重新去学习关于打印的语法，发...
建站相关
css
2023-10-14
该“:not()”伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。描述使用 :not() 时，有几种不寻常的效果和结果需要注意：可以使用此伪类编...
建站相关
css
2023-10-08
知乎某回答CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是...
建站相关
css
2023-10-04
用css实现了一个伪类的动画效果，鼠标移到li元素的时候，其伪类后从右至左移动一段距离，实装后效果不是特别好，写完又删除掉了，留个记录，用以备忘。.widget-archive li{
position: relative;
...
建站相关
css
2023-09-06
很多站点都这样的效果，鼠标移上去时对应元素上浮，然后这样的元素往往有一排。博主常见的操作是左右平移几次，然后元素就跟琴键一样依次浮动，看起来非常解压。虽然这个效果有个小小的bug，将鼠标停留在浮动起点与终点的一小块区域，会导致重复触发...
建站相关
css
2023-09-04
修改主题的时候发现ios下hover子菜单弹出后收不回去，虽然刷新一下页面或者点击一个其他的按钮也能正确关闭，但是始终感觉操作不便。于是安装了一个第三方浏览器（夸克）尝试了一下，第三方浏览器是没有什么问题的，纯属safari的锅。找了...
建站相关
css
2023-09-02
效果参见本博客左上角logo。 ：）#site-banner{
position: relative;
overflow:hidden;
margin: 0;
}
#site-banner:before {
...
建站相关
css
2023-05-25
浏览网络的时候看见某个站点的导航条菜单图标很有意思，导航条logo一般都是3条横杠，该站点的其中一条横杠是略短的，鼠标悬停时会动态伸长。尝试着自己利用css实现了类似的效果，考虑将其放入正在修改的wordpress主题当中，先记录一下...
建站相关
css
2023-05-21
网络上有很多免费的图标库，比如fontawesome，比如typicons，利用一些小图标来代替呆板的文字描述，可以让页面显得更为简洁而生动。这类图标库也有一些美中不足之处，比如在不同分辨率下，可能产生边缘的锯齿，也可能会有部分几个图...
建站相关
css
