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 ...
随机推荐
- 初试 Ceph 存储之块设备、文件系统、对象存储
转载自:https://cloud.tencent.com/developer/article/1010543 1.Ceph 存储介绍 Ceph 是一个开源的分布式存储系统,包括对象存储.块设备.文件 ...
- Vmware虚拟机设置主机端口映射
转载自:https://blog.csdn.net/Mrqiang9001/article/details/80820321
- 内网横向渗透 之 ATT&CK系列一 之 拿下域控制器
信息收集 信息收集 域控制器的相关信息: 通过arp扫描发现域控制器的ip地址为:192.168.52.138,尝试使用msf的smb_login模块登录smb是否成功 1 search smb_lo ...
- 2_Git
一. 引言 在单人开发过程中, 需要进行版本管理, 以利于开发进度的控制 在多人开发过程中, 不仅需要版本管理, 还需要进行多人协同控制 二. 介绍 Git是一个开源的分布式版本控制系统, 用于敏捷高 ...
- STM32F0单片机基于Hal库温控智能风扇
一.项目概述 设计采用STM32F0系列单片机做主控芯片,通过DHT11采集温湿度,将温度显示在OLED 屏幕上.根据温度的不同,利用STM32对风扇进行调速,总体硬件设计如下图所示 1.效果展示 2 ...
- Java程序设计（三）作业
题目1:用户输入学号,如果是以ccutsoft开头,并且后边是4位数字,前两位大于06小于等于当前年份.判断用户输入是否合法.ccutsoft_0801. 1 //题目1:用户输入学号,如果是以abc ...
- CentOS 7 下安装 MySQL 8.x
CentOS 7 下安装 MySQL 8.x 作者:Grey 原文地址: 博客园:CentOS 7 下安装 MySQL 8.x CSDN:CentOS 7 下安装 MySQL 8.x 环境 CentO ...
- 关于aws的ec2实例导出成ova后在vmware中的网络配置不生效的问题
在aws上的ec2实例,尤其是使用了aws市场中的ami创建的linux系统,默认情况下,网络配置都是通过dhcp自动获取的, 这周笔者将一台ec2实例(redhat/linux 8.3)导出/转换成 ...
- PHP全栈开发（九）：javascript 基础
js不允许读取电脑上的文件: js不允许修改服务器上的文件,修改服务器上的文件是php来做的事情. 因此js是一个前端脚本. 前端的三个语言是HTML/CSS/JavaScript 这三个东东Java ...
- P3919 【模板】可持久化线段树 1（可持久化数组）
还是用主席树来做(因为提到不同的版本),这时候的主席树不是以权值为下标的,就是普通的线段树,维护范围1~n,i存的是a[ ]中的数. 1 #include <bits/stdc++.h> ...