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. 使用growpart扩容CentOS虚拟机磁盘

    说明 一块磁盘,比如有130G,但是只有100G拿来用了,安装俩分区,一个是swap,另一个是根分区/,根分区采用的是LVM逻辑卷管理. 现在要做的是把剩余的这空闲30G分配给根分区使用 这个并不是新 ...

  2. Linux 上安装 PostgreSQL

    打开 PostgreSQL 官网 https://www.postgresql.org/,点击菜单栏上的 Download ,可以看到这里包含了很多平台的安装包,包括 Linux.Windows.Ma ...

  3. 创建Grafana Dashboard

    输入表达式,获取数据 但是考虑到多台主机,需要添加变量来选择不同主机,从而出现相应的图表 点击右上角齿轮一样的图标,这个是设置 通过在prometheus界面查询可知,可以设置的变量有两个 考虑到这俩 ...

  4. Codeforces Round #577 (Div. 2) C. Maximum Median

    题意:就是给一n(奇数)个元素数组,可以对它的元素执行k次+1操作,递增排序,求中位数最大是多少. 那我们在排完序之后,中位数前的元素可以不管它,只要对中位数后的操作就行,我们要判断和中位数相等的元素 ...

  5. CentOS 7.9 安装 kafka_2.13

    一.CentOS 7.9 安装 kafka_2.13 地址 https://kafka.apache.org/downloads.html 二.安装准备 1 安装JDK 在安装kafka之前必须先安装 ...

  6. SpringBoot 2.5.5整合轻量级的分布式日志标记追踪神器TLog

    TLog能解决什么痛点 随着微服务盛行,很多公司都把系统按照业务边界拆成了很多微服务,在排错查日志的时候.因为业务链路贯穿着很多微服务节点,导致定位某个请求的日志以及上下游业务的日志会变得有些困难. ...

  7. Linux crontab定时任务设置

    1.检查是否安装了crontab # rpm -qa | grep crontab 2.重启crontab服务 一定重启,这样确保了crontab服务的开启 # /etc/init.d/crond r ...

  8. 齐博X1到底是个什么鬼？

    什么是齐博/齐博CMS之X1? 齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. ...

  9. Three.js中加载外部fbx格式的模型素材

    index.html部分: index.js部分: Scene.js部分:

  10. pod(七)：静态pod

    目录 一.系统环境 二.前言 三.静态pod 3.1 何为静态pod 3.2 创建静态pod 3.2.1 使用--pod-manifest-path指定静态pod目录 3.2.2 静态pod默认目录/ ...