html立方体旋转展开,css3技术设计立方体旋转发光效果动图
body {
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
background: #222;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.world {
-webkit-perspective: 800px;
perspective: 800px;
width: 100vh;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.cube {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 50vh;
height: 50vh;
position: relative;
-webkit-animation: rotator 4.5s linear infinite;
animation: rotator 4.5s linear infinite;
outline: 0;
}
.cube * {
background: #000;
box-shadow: 0 0 3vh currentColor;
-webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.cube:hover * {
background: currentColor;
box-shadow: 0 0 20vh currentColor;
}
.cube .cube__front {
color: deeppink;
-webkit-transform: translateZ(25vh);
transform: translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__right {
color: lightcoral;
-webkit-transform: rotateY(90deg) translateZ(25vh);
transform: rotateY(90deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__left {
color: skyblue;
-webkit-transform: rotateY(270deg) translateZ(25vh);
transform: rotateY(270deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__back {
color: seagreen;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateY(180deg) translateZ(25vh);
transform: rotateY(180deg) translateZ(25vh);
}
.cube .cube__top {
color: mediumseagreen;
-webkit-transform: rotateX(90deg) translateZ(25vh);
transform: rotateX(90deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cube .cube__bottom {
color: dodgerblue;
-webkit-transform: rotateX(270deg) translateZ(25vh);
transform: rotateX(270deg) translateZ(25vh);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes rotator {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
html立方体旋转展开,css3技术设计立方体旋转发光效果动图相关推荐
- php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
- 沿着x轴旋转的html例子,CSS3旋转实例学习（附3D旋转实例）
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...
- html字体荧光效果,CSS3字体发光效果
CSS3 并没有直接设置发光效果的属性,但是可以利用 text-shadow 属性实现此效果 text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shad ...
- php发光字体代码,CSS3实现字体发光效果（代码实例）
本文给大家介绍CSS3如何实现字体发光效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. text-shadow 该属性为文本添加阴影效果text-shadow: h- ...
- java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 笔记：CSS3制作中轴旋转立方体
预览地址-纯 CSS 制作绕中轴旋转的立方体 参考样例-CodePen 立方体 demo perspective 设置元素被查看位置的视图 perspective: number|none; 值 描述 ...
- 立方体在三维坐标中的旋转（3D,Spining）
立方体在三维坐标中的旋转(3D,Spining) 示例 HTML CSS 更多有趣示例 尽在 知屋安砖社区 示例 HTML <div id="ThreeJS" style=& ...
- html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
- 利用CSS3做出立方体
CSS3之立方体 要想利用css3做出立方体,首先我们应该先想象以下立方体的构造,见下图: 立方体是由六个面组成,分上下左右和前后,考虑这些可以助我们更好的融入css3的代码 接下来就是要写代 ...
最新文章
- 模拟器不全屏_iOS 14实测GBA游戏模拟器下载
- vim 高级使用技巧第二篇
- 图解集合8：红黑树的移除节点操作
- Python之上下文管理协议
- 《软件设计精要与模式》推荐序三
- pat1043. Is It a Binary Search Tree (25)
- float php 运算_PHP面试经典题目
- eclipse get set 自动添加注释
- C语言课后习题(39)
- 在Ubuntu上运行C++程序
- 【转】通过IRQL看NT内核
- Lumines! to exploit
- 【白皮书分享】2021中国女性婚恋观白皮书.pdf（附下载链接）
- HDU2025 查找最大元素【最值】
- (转)如何在MySql中记录SQL日志（例如Sql Server Profiler)
- 计算机round是什么函数,round()函数,excel round什么意思
- 9.屏幕宽高比判断（Screen.width，Screen.height）
- ElasticSearch7.3.0 集群搭建及配置安全认证
- 计算机蓝牙功能,笔记本电脑蓝牙在哪里?笔记本怎么打开蓝牙功能Bluetooth
- 一个国企老兵给后辈们的忠告：三十岁之前远离国企
热门文章
- 介绍一个工具给大家，做网站时，经常要上传文件到外网服务器，但是上传时往往需要很长时间，如果有一个文件对比工具……...
- C# 5.0将带来的五大新特性
- 如何保证Session值不丢失
- Python之文章生成器（升级版，也就是更傻瓜式运行）
- OpenGL与EGL最简流程(十八)
- C++之安装boost库
- Ubuntu18.04图片信息查看器
- Gstreamer之跨平台element(十六)
- Glib2: undefined reference to `std::__throw_out_of_range_fmt(char const*, ...)问题(六)
- Android抓包方法(一) 之Fiddler代理