专栏首页前端基础3d 旋转(摘抄)

3d 旋转(摘抄)

实现代码

<cube>
	<side></side>
	<side></side>
	<side></side>
	<side></side>
	<side></side>
	<side></side>
</cube>

css 代码

cube {
  --s: 243px;
  --hs: calc(var(--s) / 2);
  display: block;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  will-change: transform;
  animation: r 15s linear infinite;
}

side {
  position: absolute;
  width: 100%;
  height: 100%;

  --sq: conic-gradient(
    from 270deg at calc(100% / 3) calc(100% / 3),
    #fff 90deg,
    transparent 0
  );

  background: var(--sq) calc(var(--s) / 3) calc(var(--s) / 3) / 100% 100%,
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 3) calc(100% / 3),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 9) calc(100% / 9),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 27) calc(100% / 27),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 81) calc(100% / 81);

  background-color: #000;
  background-blend-mode: difference;
}

side:nth-child(1) {
  transform: translateZ(var(--hs));
}
side:nth-child(2) {
  transform: translateZ(calc(-1 * var(--hs)));
}
side:nth-child(3) {
  transform: rotateY(90deg) translateZ(var(--hs));
}
side:nth-child(4) {
  transform: rotateY(-90deg) translateZ(var(--hs));
}
side:nth-child(5) {
  transform: rotateX(90deg) translateZ(var(--hs));
}
side:nth-child(6) {
  transform: rotateX(-90deg) translateZ(var(--hs));
}

@keyframes r {
  100% {
    transform: rotateX(1turn) rotateY(1turn) rotateZ(1turn);
  }
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  perspective: 1000px;
}

body:after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 50%, #ff9800 1%, #673ab7);
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
}

成果展示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于mui开发的APP自动更新的问题

    好了这以上就是我分享的mui开发的app 的更新问题,有问题请留言,谢谢,一起努力一起进步

    我乃小神神
  • js 根据url 转换图片(base64)

    我乃小神神
  • ES6的小总结

    es6是新一代的JavaScript 的标准,尤其你要学习React,那就必须要学es6啊,因为不然,你压根就是蒙的,我后续也会更新react 的博客,es6的...

    我乃小神神
  • 关于Div的宽度与高度的100%设定

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

    bear_fish
  • 前端-微信小程序开发(7):列表页面怎么做

    github地址:https://github.com/yexiaochai/wxdemo

    grain先森
  • 关于git pull或fetch失败

    本文会经常更新,请阅读原文: https://xinyuehtx.github.io/post/%E5%85%B3%E4%BA%8Egit-pull%E6%88...

    黄腾霄
  • Statspack之十三-Enqueue

    http://www.eygle.com/statspack/statspack13.htm

    数据和云01
  • Mac开发跬步积累(五): Dark Mode下适配你的UI界面

    在macOS 10.9+ 的时候,苹果就提供了NSAppearance这个类来协助AppKit管理App的UI控件. NSAppearance决定着AppKit...

    代码行者
  • div 自适应高度 自动填充剩余高度

    方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> ...

    庞小明
  • 用python做时间序列预测七:时间序列复杂度量化

    Sample Entropy是Approximate Entropy(近似熵)的改进,用于评价波形前后部分之间的混乱程度, 熵越大,乱七八糟的波动越多,越不适...

    程序员一一涤生

扫码关注云+社区

领取腾讯云代金券