旋转魔方---css3特效，无jquery

最新推荐文章于 2024-05-14 22:45:25 发布
最新推荐文章于 2024-05-14 22:45:25 发布
阅读量797 收藏 2
点赞数 1
分类专栏： animate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/impossible1994727/article/details/79694806
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超绚丽CSS3多色彩发光立方体旋转动画DEMO演示</title>

<style>
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);
  }
}
</style>
</head>
<body>

<div class="world">
  <div class="cube" tabindex="0">
    <div class="cube__front"></div>
    <div class="cube__back"></div>
    <div class="cube__left"></div>
    <div class="cube__right"></div>
    <div class="cube__top"></div>
    <div class="cube__bottom"></div>
  </div>
</div>

</body>
</html>
impossible1994727
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 背景特效实现_【网络特效】12 个炫酷背景特效库
weixin_39638057的博客
11-29 903
1.particles-bg地址：https://github.com/lindelof/particles-bg效果：2.particles-bg-vue地址：https://github.com/lindelof/awesome-web-effect这是一个基于VUE的粒子动画组件。3.jquery.ripples地址：https://github.com/sirxemic/jque...
CSS3D魔法——旋转魔方
m0_67619362的博客
05-05 693
3D旋转：rotate3d(x,y,z,deg) 透视：perspective 3D呈现：transfrom-style 三维坐标系： 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 X轴：水平向右（注意：X往右边是正值，往左边是负值） Y轴：垂直向下（注意：Y往下面是正值，往上面是负值） Z轴：垂直屏幕（注意：往外面是正值，往里面是负值） 我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。 [](()二、魔方图片 ==..
html 边框立体效果,巧用边框线实现立体按钮效果（纯CSS）
weixin_29014939的博客
06-03 1896
本文教你用页面代码:中国网页设计中国网页设计将LI定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。CSS代码：#navigation ul {list-style: none;margin: 0;padding: 0;padding-top: 4px;}#navigation li {display: inline;}#navigation a:link, #n...
用html编写一个红绿灯,如何用html+css+javascript写一个简易红绿灯
weixin_35079766的博客
06-16 1279
2在记事本中复制添加以下内容并保留：红绿灯#div1 div{width:200px;height:200px;background:pink;border:2px solid blue;float:left;margin:10px;border-radius:100%;}#div1{width:680px;height:220px;background:pink;border:2px solid...
2024年最新HTML+CSS实战操作旋转魔方(3)，最新2024年Web前端大厂面试经验
最新发布
2401_84619986的博客
05-14 394
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。以 Vue 为例，我整理了如下的面试题。
html做彩色方格,CSS3 彩色像素化方格
weixin_32040059的博客
07-22 681
CSS语言：CSSSCSS确定section {height: 600px;width: 600px;}section .big-brother,section .inner {height: 200px;width: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}section .big...
纯css实现超炫酷的星空背景按钮
CQXXTXX的博客
03-08 3498
使用纯css实现一款非常炫酷的按钮
css3--旋转的3D魔方
qq_37635519的博客
05-22 598
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="styleshee...
3D正方形魔方旋转CSS3特效.zip
10-10
【3D正方形魔方旋转CSS3特效】是一种在网页设计中常见的动态视觉效果，它利用了CSS3的强大力量来实现一个可交互的3D立方体旋转展示。这个特效通常用于展示产品、信息或者作为网站的一个吸引眼球的元素。在本案例中，...
CSS3魔方旋转图片切换展示特效
07-14
"CSS3魔方旋转图片切换展示特效"是一种利用CSS3特性实现的交互式图片展示方法，它通过立方体旋转的效果，给用户带来独特的视觉体验。 首先，我们要理解这个特效的核心在于“立方体旋转”。在CSS3中，3D变换是引入的...
CSS3魔方旋转图片切换展示特效.zip
10-08
总的来说，CSS3魔方旋转图片切换展示特效是现代网页设计中一种创新的图片展示方法，结合了CSS3的3D转换和动画功能以及jQuery的便利性，为用户提供了一种互动且引人注目的视觉体验。无论是对于学习前端开发还是提升...
css背景渐变几种样式
12-11
css背景渐变几种样式,供大家参考学习！！
CSS3 3D魔方旋转图片切换查看特效.rar
10-01
总的来说，CSS3 3D魔方旋转图片切换查看特效是一种结合了CSS3 3D变换、jQuery库和交互设计的高级网页特效。它不仅展示了CSS3的强大功能，也为网页设计带来了更多的可能性和创新思路。开发者可以根据实际需求对代码...
鼠标悬停魔方打开CSS3特效.zip
10-10
总结来说，"鼠标悬停魔方打开CSS3特效.zip"是一个利用CSS3的3D变换、过渡和伪类选择器，结合jQuery库，实现的鼠标悬停时的动态网页特效。这种特效对于提升用户体验，增强网站的互动性和吸引力具有积极作用。
几种css炫酷背景欣赏
热门推荐
小圣贤君的博客
10-30 2万+
这里为大家带来几种表现惊人的css背景效果，纯css表现效果，有桌布效果，星空效果，心形效果，砖墙效果等。请欣赏：background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gr
css在文字前面设置带颜色的小方块样式
a123789999的博客
05-19 2272
<a-divider orientation="left" class="category"> <label>纳入全省食用农产品合格证管理</label> <a @click="toMapMode">地图模式</a> </a-divider> .category label { color: rgba(0, 0, 0, 0.85); font-size: 24px; &:...
CSS实现炫酷动画背景
m0_61643133的博客
11-13 2649
因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。
HTML+CSS 实现一个立方体
chanyuhong's
07-19 3077
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立方体</title> </head> <style> *{ padding: 0;margin: 0; } #cube{ width: 300px;height: 300px; font-size: 80px; text-align: center;.
HTML怎么做成多彩背景,纯html+div+css模拟酷炫彩色渲染背景
weixin_34206263的博客
06-01 375
纯html+div+css模拟酷炫彩色渲染背景www.html.com.cn出品html>纯div+css模拟酷炫彩色渲染背景/*自写js*/body{/*padding:0;margin:0;*/margin:0px;padding:0px;width:1px;height:1px;background:linear-gradient(toright,rgb(111,...
background 旋转_CSS 3D世界，360°旋转水晶魔方
05-17
要实现一个旋转的 CSS 3D 世界，我们需要使用以下属性： - `transform-style: preserve-3d;`：将子元素保留在 3D 空间中 - `transform-origin: center center;`：设置元素的变换原点为中心点 - `transform: rotateY...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值