3D旋转不能对齐，元素边倾斜
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>3d导航栏</title>
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14
15 ul {
16 margin: 100px;
17 }
18
19 li {
20 list-style: none;
21 }
22
23 ul li {
24 float: left;
25 width: 120px;
26 height: 35px;
27 }
28
29 .box {
30 perspective: 500px;
31 position: relative;
32 width: 100%;
33 height: 100%;
34 transform-style: preserve-3d;
35 transition: 2s all;
36 }
37
38 .box:hover {
39 transform: rotateX(90deg);
40 }
41
42 .front,
43 .bottom {
44 position: absolute;
45 top: 0;
46 left: 0;
47 width: 100%;
48 height: 100%;
49 color: #fff;
50 font-weight: bold;
51 text-align: center;
52 line-height: 35px;
53 }
54
55 .front {
56 background-color: pink;
57 transform: translate3d(0, 0, 17.5px);
58 /* border-top-left-radius: 10px; */
59 /* border-top-right-radius: 10px; */
60 }
61
62 .bottom {
63 background-color: purple;
64 transform: translate3d(0, 17.5px, 0) rotateX(-90deg);
65 /* border-bottom-left-radius: 10px; */
66 /* border-bottom-right-radius: 10px; */
67 }
68 </style>
69 </head>
70
71 <body>
72 <ul>
73 <li>
74 <div class="box">
75 <div class="front">2333</div>
76 <div class="bottom">1551</div>
77 </div>
78 </li>
79 <li>
80 <div class="box">
81 <div class="front">2333</div>
82 <div class="bottom">1551</div>
83 </div>
84 </li>
85 <li>
86 <div class="box">
87 <div class="front">2333</div>
88 <div class="bottom">1551</div>
89 </div>
90 </li>
91 <li>
92 <div class="box">
93 <div class="front">2333</div>
94 <div class="bottom">1551</div>
95 </div>
96 </li>
97 </ul>
98 </body>
99
100 </html>
3D导航栏旋转90度后 bottom元素会变成
这样，两条边会倾斜,而且不能对齐，我自己的解决方法是拉大视距
perspective: 999999px; 不知道有没有更好的方法。
3D旋转不能对齐，元素边倾斜的更多相关文章
- 3d旋转--transform-style: preserve-3d,translate3d(x,y,z),perspective()
transform-style: preserve-3d,translate3d(x,y,z),perspective() 让其倾斜的核心:加perspective(600px)让其动的核心:rans ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- 3D旋转菜单
今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...
- CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
- 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上
这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...
- 纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- 2D旋转和3D旋转
2D旋转 先给个容器 <p onClick="rotate2D()" id="rotate2D" class="animated_div&quo ...
随机推荐
- Elasticsearch：管理 Elasticsearch 内存并进行故障排除
文章转载自:https://elasticstack.blog.csdn.net/article/details/116974695
- Elasticsearch集群黄色原因的终极探秘
文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247484125&idx=1&sn=18274d6 ...
- 5N的多次方
N=eval(input(" 请输入一个数:")) for i in range (5): print(pow(N,i))
- mapboxgl加载tiff
缘起 近期在项目中遇到这么一个需求,需要在地图上展示一组格网数据,格网大小为2m*2m,地图api用的mapboxgl.起初拿到这个需要感觉很easy,在地图上添加一个fill图层就好啦.把格网面数据 ...
- P3250 [HNOI2016] 网络 （树剖+堆/整体二分+树上差分+树状数组）
解法1: 本题有插入路径和删除路径,在每个节点维护插入堆和删除堆,查询时两者top一样则一直弹出.如果每个节点维护的是经过他的路径,显然有些不好处理,正难则反,每个点维护不经过他的路径,那么x节点出了 ...
- C语言小白刷题
1.有n个评委,他们给出score个分数,请用代码写出平均值,ave代表平均值 2022-10-15 13:17:10 int main() { int n, i =1, score, sum = 0 ...
- Vue中使用Switch开关用来控制商品的上架与下架情况、同时根据数据库商品的状态反应到前台、前台修改商品状态保存到数据库
一般后台对商品的信息管理.包含商品的上架与下架.为了提高用户的体验.将商品上下架的操作做成开关的形式.同时后台数据库中保存的商品状态能够根据开关状态改变. 1.效果展示 这种效果:== 当开关是开启状 ...
- vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）
文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...
- LeetCode------两数之和（3）【数组】
来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/two-sum 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 ...
- python实现多接口翻译软件
本实验用pyqt5做了一个小软件,里面使用了市面上主流的6种翻译软件接口:谷歌.百度.有道.金山词霸.腾讯.必应,界面如图所示: 以下是程序代码: import time,sys,os,hashlib ...