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旋转不能对齐,元素边倾斜的更多相关文章

  1. 3d旋转--transform-style: preserve-3d,translate3d(x,y,z),perspective()

    transform-style: preserve-3d,translate3d(x,y,z),perspective() 让其倾斜的核心:加perspective(600px)让其动的核心:rans ...

  2. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  3. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  4. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  5. CSS3——3D旋转图(跑马灯效果图)

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  6. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

  7. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  8. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  9. HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  10. 2D旋转和3D旋转

    2D旋转 先给个容器 <p onClick="rotate2D()" id="rotate2D" class="animated_div&quo ...

随机推荐

  1. Centos7主机安装Cockpit管理其他主机

    前提条件:需要管理的每台服务器上都需要安装cockpit 假设Centos7主机安装Cockpit的为A,其他主机为B 如果B上有A的公钥,那么直接连接至B,否则,输入B的用户名密码连接. 问题:在A ...

  2. 普通用户使用CI/CD权限使用

    根据文章:授权用户访问名称空间 (https://www.cnblogs.com/sanduzxcvbnm/p/15015576.html) 进行有关操作后,普通用户点击 会报错如下信息: 解决办法: ...

  3. LeetCode - 数组的改变和移动

    1. 数组的改变和移动总结 1.1 数组的改变 数组在内存中是一块连续的内存空间,我们可以直接通过下标进行访问,并进行修改. 在Java中,对于List类型来说,我们可以通过set(idx, elem ...

  4. 2016 ZCTF note3:一种新解法

    2016 ZCTF note3:一种新解法 最近在学习unlink做到了这道题,网上有两种做法:一种是利用edit功能读入id时整数溢出使索引为-1,一种是设置块大小为0使得写入时利用整数溢出漏洞可以 ...

  5. 用深度强化学习玩FlappyBird

    摘要:学习玩游戏一直是当今AI研究的热门话题之一.使用博弈论/搜索算法来解决这些问题需要特别地进行周密的特性定义,使得其扩展性不强.使用深度学习算法训练的卷积神经网络模型(CNN)自提出以来在图像处理 ...

  6. C++面向对象编程之复合、委托和继承

    1.复合,表示has a template <typename T> calss A{ protected: B<T> c; } 这里表示 A 里面有一个 B,A 可以调用 B ...

  7. spring boot使用swagger生成api接口文档

    前言 在之前的文章中,使用mybatis-plus生成了对应的包,在此基础上,我们针对项目的api接口,添加swagger配置和注解,生成swagger接口文档 具体可以查看本站spring boot ...

  8. 华为交换机VLAN常用命令

    划分vlan vlan 10 划分Vlan10 vlan batch 30 40 同时创建vlan30和40 dispaly vlan 查看vlan信息 int e0/0/1 进入某一个接口 port ...

  9. 2021年9月28日,老是遇到一些非常奇葩的问题。就离谱、好好的一个web项目就莫名奇妙坏了。

    起因是这样的:我前几天用idea2020编辑器,用ssm框架搭建了一个图书管理系统.只是将图书信息的增删改查实现,还有用户的注册和登录功能实现.本来想着今天将用户信息的删除和修改完善以下,本来是很简单 ...

  10. 1、在SrpingBoot的环境当中使用JSP及相关功能

    创建webapp目录 由于SpringBoot项目不建议直接访问jsp页面,但是我现在要做的事情需要去访问,那么我就需要在原有的项目基础上为访问jsp页面进行一个调整 首先在项目当中,java和res ...