css3正方体选中父层 子层解体_CSS3 嵌套立方体
CSS
语言：
CSSSCSS
确定
body {
background: #ddd;
}
.pane {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin: -50px;
-webkit-perspective: 700px;
perspective: 700px;
}
.pane,
.pane *,
.pane *:before,
.pane *:after {
position: absolute;
top: 50%;
left: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
visibility: hidden;
}
.cube {
height: 50px;
width: 50px;
margin: -25px;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
-webkit-transform: rotate3d(-1, -1, -1, 360deg);
transform: rotate3d(-1, -1, -1, 360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
-webkit-transform: rotate3d(-1, -1, -1, 360deg);
transform: rotate3d(-1, -1, -1, 360deg);
}
}
.cube .side {
height: 50px;
width: 50px;
margin: -25px;
line-height: 50px;
text-align: center;
font-size: 50px;
visibility: visible;
background: rgba(255, 138, 101, 0.2);
}
.cube .side:nth-child(1) {
-webkit-transform: rotatex(90deg) translate3d(0, 0, 25px);
transform: rotatex(90deg) translate3d(0, 0, 25px);
}
.cube .side:nth-child(2) {
-webkit-transform: rotatex(180deg) translate3d(0, 0, 25px);
transform: rotatex(180deg) translate3d(0, 0, 25px);
}
.cube .side:nth-child(3) {
-webkit-transform: rotatex(270deg) translate3d(0, 0, 25px);
transform: rotatex(270deg) translate3d(0, 0, 25px);
}
.cube .side:nth-child(4) {
-webkit-transform: rotatey(360deg) translate3d(0, 0, 25px);
transform: rotatey(360deg) translate3d(0, 0, 25px);
}
.cube .side:nth-child(5) {
-webkit-transform: rotatey(450deg) translate3d(0, 0, 25px);
transform: rotatey(450deg) translate3d(0, 0, 25px);
}
.cube .side:nth-child(6) {
-webkit-transform: rotatey(540deg) rotatey(90deg) translate3d(0, 0, 25px);
transform: rotatey(540deg) rotatey(90deg) translate3d(0, 0, 25px);
}
.cube .side .hypersides {
display: block;
height: 200%;
width: 200%;
margin: -100%;
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
background: rgba(0, 0, 0, 0.1);
visibility: visible;
}
.cube .side .hypersides .hyperside:nth-child(5) {
height: 50px;
width: 50px;
margin: -25px;
-webkit-transform: translate3d(0, 0, -25px);
transform: translate3d(0, 0, -25px);
background: rgba(255, 138, 101, 0.1);
visibility: visible;
box-shadow: 0 0 0 2px rgba(33, 33, 33, 0.99) inset;
}
.cube .side .hypersides .hyperside:nth-child(1) {
right: auto;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
.cube .side .hypersides .hyperside:nth-child(1):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.2);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .hypersides .hyperside:nth-child(2) {
right: 0;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
}
.cube .side .hypersides .hyperside:nth-child(2):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.2);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .hypersides .hyperside:nth-child(3) {
right: auto;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 180deg);
transform: rotate3d(0, 0, 1, 180deg);
}
.cube .side .hypersides .hyperside:nth-child(3):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.2);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .hypersides .hyperside:nth-child(4) {
right: auto;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 270deg);
transform: rotate3d(0, 0, 1, 270deg);
}
.cube .side .hypersides .hyperside:nth-child(4):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 75px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.2);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .supersides {
display: block;
height: 300%;
width: 300%;
margin: -150%;
-webkit-transform: translate3d(0, 0, 50px);
transform: translate3d(0, 0, 50px);
box-shadow: 0 0 0 2px rgba(33, 33, 33, 0.99) inset;
background: rgba(255, 138, 101, 0.2);
visibility: visible;
}
.cube .side .supersides .superside {
background: rgba(255, 138, 101, 0.1);
visibility: visible;
}
.cube .side .supersides .superside:nth-child(5) {
height: 100px;
width: 100px;
margin: -50px;
-webkit-transform: translate3d(0, 0, -25px);
transform: translate3d(0, 0, -25px);
background: rgba(255, 138, 101, 0.2);
visibility: visible;
box-shadow: 0 0 0 2px rgba(33, 33, 33, 0.99) inset;
}
.cube .side .supersides .superside:nth-child(1) {
right: auto;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
.cube .side .supersides .superside:nth-child(1):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.1);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .supersides .superside:nth-child(2) {
right: 0;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
}
.cube .side .supersides .superside:nth-child(2):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.1);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .supersides .superside:nth-child(3) {
right: auto;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 180deg);
transform: rotate3d(0, 0, 1, 180deg);
}
.cube .side .supersides .superside:nth-child(3):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.1);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
.cube .side .supersides .superside:nth-child(4) {
right: auto;
height: 100%;
width: 100%;
margin: -50%;
-webkit-transform: rotate3d(0, 0, 1, 270deg);
transform: rotate3d(0, 0, 1, 270deg);
}
.cube .side .supersides .superside:nth-child(4):before {
content: '';
height: 35.35534px;
width: 100%;
top: 0;
left: 0;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotate3d(-1, 0, 0, 44.95308deg);
transform: rotate3d(-1, 0, 0, 44.95308deg);
visibility: visible;
-webkit-clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 25px 100%, 124.98125px 100%, 100% 0, 0 0);
background: rgba(255, 138, 101, 0.1);
background-image: -webkit-linear-gradient(35.248deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), -webkit-linear-gradient(144.752deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
background-image: linear-gradient(54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px), linear-gradient(-54.75214deg, rgba(33, 33, 33, 0.99) 20.65064px, rgba(33, 33, 33, 0) 20.65064px);
}
css3正方体选中父层 子层解体_CSS3 嵌套立方体相关推荐
- css3正方体选中父层 子层解体_CSS3 :nth-child(n)选择器 匹配属于其父元素的第N个子元素...
定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型. n 可以是数字.关键词或公式. 先看下面一段代码: 第一行 第二行 第三行 第四行 第五行 如果我们 ...
- touch拦截监听_Android - requestDisallowInterceptTouchEvent() 阻止父层的View截获touch事件(事件处理机制)...
研究这个方法之前,首先让我们回顾一下View的onTouchEvent()以及onInterceptTouchEvent()的详细解释 (1)onTouchEvent() 当手指触摸到屏幕时,系统就会 ...
- css选中父元素下的第一个子元素
目录标题 前言 E:first-child的第一个误区(只会选中我规定的区域中的一个,不会遍历其下有多少个孙或曾孙元素) E:first-child的第二个误区(不管这个E元素前面有几个兄弟,只要我是 ...
- html第一个子元素选择,css选中父元素下的第一个子元素(:first-child)
前言 最近在项目中用到 :first-child 很容易的就想到了,嗯嗯.这不就是选择第一个元素吗? 好像很好用,平时使用中也没有遇到什么问题,理所当然的就以为它只会选中父元素下的第一个元素,对孙元素 ...
- css中间镂空,css3如何实现遮罩层镂空效果 css3遮罩层镂空效果的多种实现方法
css3如何实现遮罩层镂空效果?本篇文章小编给大家分享一下css3遮罩层镂空效果的多种实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 先看看效果 [ 方法一:截图模 ...
- EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例 效果展示 未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
- jstree禁用父节点点击_Jstree选中父节点时禁用子节点也被选中
这次给大家带来Jstree选中父节点时禁用子节点也被选中,解决Jstree选中父节点时禁用子节点也被选中的注意事项有哪些,下面就是实战案例,一起来看一下. 问题描述: 最近用jstree遇到一个问题, ...
- EasyUI中tree选中父节点自动选中子节点，取消子节点自动取消父节点，子节点勾选完毕自动勾选父节点
今天有需求,将树设为具有全选功能 选中父节点自动全选子节点 全选状态下,当用户取消某一个子节点,自动取消父节点的勾选 未全选状态下,用户勾选全部子节点,自动勾选对应的父节点 感觉挺简单,实际写的时候才 ...
- jstree禁用父节点点击_Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题...
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2.修 ...
最新文章
- 版本更新带来的缓存问题_浏览器缓存原理总结
- 数组名与数组指针的关系
- 基于PYQT编写一个人脸识别软件
- 两边双虚线是什么意思_行星减速机生产厂家解析行星减速机双支撑与单支撑
- Python十行代码带你穿越管世界
- 汇编语言 王爽 【第四版】 第一章 检测点1.1
- 处理器访问内存时，CPU核、cache、MMU如何协同工作
- 标准摇滚电吉他音源 Orange Tree Samples Evolution Rock Standard
- 微信使用技巧 - 收集整理
- C++语言基础篇（二）
- GoLang之标准库net/http包源码
- Android手机投屏初探
- html语言中空行标记,HTML代码中的空格和空行的实例操作
- 投资银行理论与实务（一）：投资银行学概论
- 微信小程序语言c#,微信小程序推出最新脚本语言WXS，你需要知道的全在这里了...
- 每日经典算法题（十三） 逆推算法(平方根相关)
- 西部数码服务器未续费,域名到期了，如何续费？
- 互联网晚报 | 06月21日 星期二 | iPhone14或提高全系售价；腾讯控股出售新东方在线7460万股；乐高8月涨价...
- 企业网站如何做SEO优化
- linux下如何装NVIDIA显卡驱动（gt940m为例）