-
2022-05-14 21:24:28
友友们!!纯纯用css就可以写出会自己旋转的3D立方体!
首先需要了解几个属性：
transform 变形
translate 位移
rotate 旋转
perspective 透视
transform-style:preserve-3d 开启立体呈现
定义动画：
@keyframes name{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
调用动画：
animation:name 1s linear infinite
认识了这些需要用到的属性以后，我们就可以开始写代码啦~
我们可以先写出html结构
<div class="cube"> <main> <div class="front"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </main> </div>写出立方体的六个面，并且给出每个面不同的类名。
接下来再来写CSS部分：
给大盒子设置宽高，并且给出视距，以便等会更好的观察立方体
.cube { width: 200px; height: 200px; perspective: 800px; margin: 100px; }然后咱们要给盒子的主体调整一下位置，其他六个面可以更好的摆放，记得要给主体父盒子开启3D立体呈现哦~
main { width: 100%; height: 100%; transform: translateZ(-100px); transform-style: preserve-3d; }接下来就是要调整立方体的六个面了，先统一设置div的宽高：
.cube div { width: 100%; height: 100%; position: absolute; }然后就可以一个面一个面的位移、旋转，把它们调整至我们需要它所在的位置了
.front { background: pink; transform: translateZ(100px); } .back { background-color: grey; transform: translateZ(-100px); } .left { background-color: khaki; transform: rotateY(90deg) translateZ(100px); } .right { background-color: lightblue; transform: rotateY(90deg) translateZ(-100px); } .top { background-color: lightseagreen; transform: rotateX(90deg) translateZ(-100px); } .bottom { background-color: lightsalmon; transform: rotateX(90deg) translateZ(100px); }这个部分的位置转换、数值等一定要算清楚噢，让每个面都能连接在一起~
设置好位置后 目前我们还是看不出来的，页面还是这个效果
这个时候 我们就要定义动画了：
@keyframes rotate { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } }让父级调用该动画：
在前面main的代码中再添加调用动画的代码
animation: rotate 5s linear infinite;这个时候我们就可以看到立方体开始旋转啦~
非常有意思的小实验噢~ 大家可以试试
以下是完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cube { width: 200px; height: 200px; perspective: 800px; margin: 100px; } main { width: 100%; height: 100%; transform: translateZ(-100px); transform-style: preserve-3d; animation: rotate 5s linear infinite; } @keyframes rotate { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube div { width: 100%; height: 100%; position: absolute; } .front { background: pink; transform: translateZ(100px); } .back { background-color: grey; transform: translateZ(-100px); } .left { background-color: khaki; transform: rotateY(90deg) translateZ(100px); } .right { background-color: lightblue; transform: rotateY(90deg) translateZ(-100px); } .top { background-color: lightseagreen; transform: rotateX(90deg) translateZ(-100px); } .bottom { background-color: lightsalmon; transform: rotateX(90deg) translateZ(100px); } </style> </head> <body> <div class="cube"> <main> <div class="front"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </main> </div> </body> </html>更多相关内容 -
css正方体实现--（transform练习）
2021-08-04 08:39:07昨天看过在看完transform后，想做一个正方体的效果。昨天transform的笔记在这里源码在这里可以看到闭眼5秒钟脑子里预演了一遍大概咋写，然后就认为自己已经可以写出来了。今天强迫自己去用手给实现一遍，结果发现...展开全文昨天看过在看完transform后，想做一个正方体的效果。
昨天transform的笔记在这里
源码在这里可以看到
闭眼5秒钟脑子里预演了一遍大概咋写，然后就认为自己已经可以写出来了。
今天强迫自己去用手给实现一遍，结果发现
懒惰和盲目自信又一次让自己有了“这我也会”的错觉
第一次懵逼
发现的问题有好多：
为什么只展现出来一个面？
为什么动画效果显示出来的是平面
先解决第一问题：
先要明确一点： 要实现3d效果，在transform-origin这个属性上必须要写上第三个参数。
给面3设置的是ratateY(180deg)，在确保上面这个没问题之后，可是效果看上去这个面只是进行了翻转而并没有变远。 所以这时候要考虑是不是没有开启景深的原因
于是给container加上 perspective:200px;
这时候的效果图如下：
1.gif
第一个问题解决。
再看第二个问题：
为什么动画效果显示出来的是一个平面？
这个我想到了昨天笔记里的这个效果
123
会不会也是因为在旋转container的时候，它的子元素(也就是每一个面)的3d变化都没保存所导致的。
于是我试着在container上加了
transform-style:preserve-3d
效果图如下
1.gif
意外发现那个消失的1面(正面)也显示出来了。
第二次懵逼
虽然是3d效果了，可是这个效果跟想象中的有点不一样啊(简直就是完全不一样)。
想了好久，不知道问题出在了哪里。
盯着看了好久，发现一个问题： 由于加了景深的缘故，每一个面的大小貌似已经固定。
拿左侧右侧的两面来说：
预期是：效果是近大远小的梯形效果，但具体形状还是矩形。
可实际却是： 每一个面的形状已经在形成视觉效果时候便已经固定(左右两个面已经不是梯形而是矩形。)
通过上面这个发现，猜测了下css实现景深效果的一部分原理也不知道对不对：根据几何学的公式将平面的dom转换为符合视觉效果的另一种图形从而达到景深的效果。
举个例子就是矩形左右两侧，浏览器只是根据几何学把两个矩形变成了符合视觉预期的梯形，让立方体有里景深的效果。
既然有了上面这个猜测，那就试着先把容器的景深给去掉
.container{
---------perspective:XXX
}
效果如下
1.gif
这里有没有发现一个问题：
在一开始只有一个面3能显示出来时候，靠加景深css来让其他面展现出来，而现在却要删掉这个属性。
而删掉这个属性后，发现页面展现并没有回到上面最开始的那个样子。
看了下代码，发现是transform-style起了作用。这个css的作用本身就保留子元素(不是子孙元素)的3d变化。所以子元素的rotate符合预期没出现偏差。
那现在就要考虑怎么样做，才能实现符合预期的景深效果
具体咋做，我看了教程上的做法。但教程上并没有说为啥要这么做，很自然的这么写了
又一次证明 啥事还是要亲自来一遍。
既然景深会影响到子元素的transform的变换结果，那如果子元素不变换呢。
所以试着这样写：
在container的外面再包一层dom，然后景深的css属性放到这个dom上
效果图如下：
1.gif
实现真3d了，可是在旋转的时候有点怪怪的，多看几遍发现正方体的旋转点为面1的中心。而预期的效果则是围绕着正方体的中心旋转。 所以这时候可以给旋转的那个dom(也就是container)加上变换中心点的样式：
transform-origin: center center -75px;
这里要说的是 transform-origin:center center ???px 这里的px是多少呢。 自己试一试算一算，会发现 这里填成立方体的长的一半最合适。
最后，看效果：
1.gif
以上均是看妙味课程后的笔记。 妙味大法好！
作为一个跟浏览器打交道的人，应该是很烦那种PC端完美但移动端迷之bug的情况。
上面这个图是在PC上开发时候截的图，多完美，而下图是在ios上截的图。(安卓没出问题)
为啥是这样子的，很烦。很烦。
Paste_Image.png
在排查代码的时候，发现我的正面(也就是面1)没有设置rotate，因为按理说，它设置成rotate(0)和不设置在表现上是没区别的。试着给这个面也加了rotate之后，ios上的效果有所改观。
1.gif
这时候发现面1 的问题是已经解决了，可旋转的样子跟pc上的最终效果还是有很大差距。
-
如何通过CSS3实现旋转立方体
2021-08-05 00:10:45主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，...展开全文主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果
如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这个旋转立方体效果。具有一定参考价值，希望对大家有所帮助
【推荐课程：CSS3教程】
在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的“后”，“顶”，“底”，“左”，“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示
然后设置box的CSS属性，以及将它设置为3D元素。在这里需要注意要设置定位，目的是让六个元素可叠加在一起.box{
position: relative;
width:200px;
height:200px;
transform-style: preserve-3d;/*创造3D空间*/
-webkit-transform-style: preserve-3d;
transition: all 5s linear;
}
接下来就要设置立方体的六个面.box div{
width:200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
border: 1px solid #46B8DA;
opacity: 0.5;
}
六个面的公共部分设置完了，接下来就要设置这六个面的3d效果，我们可以通过transform 属性来设置3D变化，它可以允许我们对元素进行旋转，移动，倾斜等.one{
transform: rotateY(0deg) translateZ(100px);
background-color:rgb(255,118,19);
}
.two{
transform: rotateY(180deg) translateZ(100px);
background-color:rgb(231,78,72);
}
.three{
transform: rotateX(90deg) translateZ(100px);
background-color: rgb(75,165,165);
}
.four{
transform: rotateX(-90deg) translateZ(100px);
background-color:rgb(129,182,62);
}
.five{
transform: rotateY(90deg) translateZ(100px);
background-color: rgb(255,118,19);
}
.six{
transform: rotateY(-90deg) translateZ(100px);
background-color:rgb(244,208,114);
}
这样我们的立方体就做好了，当鼠标移上去的时候就会发生旋转.box:hover{
transform: rotateX(360deg) rotateY(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
效果图：
总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以让大家学会如何通过CSS3实现旋转立方体
-
CSS3 立方体
2015-07-02 10:42:28CSS3实现3D立方体动画效果，包括animation，transition，transform等属性的使用。 -
Css制作立方体
2020-03-08 18:15:09立方体它是有六个面的,并且它的每个面都是相同大小的。我们在去设置正方体的时候首先得去把它的这六个面给设置出来，这六个面它想要呈现出一个正方体的效果，那么它肯定是在一个具有空间感的父元素里面的。参考下图...展开全文立方体它是有六个面的,并且它的每个面都是相同大小的。我们在去设置正方体的时候首先得去把它的这六个面给设置出来，这六个面它想要呈现出一个正方体的效果，那么它肯定是在一个具有空间感的父元素里面的。参考下图图1、图2、图3
图1立方体
图2代码
图3浏览器效果
我们把父元素相对于浏览器窗口定位于居中位置，这里注意给父元素一个高度，也就是html,body。我把六个li设置成跟ul一样大小，打开浏览器它们会默认自上而下一排显示，见图4、图5
图4代码
图5浏览器效果
接下来我给li一个定位，让它们都定在ul里面重叠在一起，我先给6个li分别设置不同的颜色，以便进行区分，然后让li去相对于ul的这个位置再去相对展开进行位移，见图6、图7
图6代码
图7浏览器效果
在3D空间里，分别有X轴、Y轴和Z轴这三个轴。x轴就是代表水平方向的位置，y轴代表的是垂直方向的位置，z轴代表的是面对屏幕方向的位置。六个块要布局成立方体，之前我已经把六个块都定在一起了，要想把它变成立方体，首先得把它们的六个方块进行位移，位移之后再进行旋转。先参考下图图8
图8位移旋转分析图
我先给第二个块进行位移，第一个块我把它放在那里就不动了，第二个块我让它在视觉效果上相对于第一个块往后平移200px,也就是图8里面中间那个黑色的框，这里要注意给父元素设置3D空间，不然看不到效果，设置完成后方块2就会跑到最前面来。见图9、图10
transform-style:属性是用来设置3D空间的
属性值：
flat ： 处在2D空间里 （默认值）
preserve-3d： 处在3D空间里
图9代码
图10浏览器效果
为了能够看到效果，我们给父元素设置一个鼠标滑过效果，滑过谁就给谁加过渡。我想把方块二往后移动，沿z轴正值向前，负值向后，因此，我把值改为-200px;效果见图11、图12、图13
图11代码
图12代码
图13浏览器效果
接下来来写第三个方块，第三个方块我让它往第一个方块的左边去进行位移，往左边位移就是沿着x轴，x轴里往左是负值，往右是正值，因此给个-200px,往左后还得让它与之前的第二个面接起来，所以还要让它沿y轴旋转-90度。元素默认旋转的位置是中心点，我们要把元素默认的旋转位置给改成right和center。见图14
图14代码
第四个方块我让它往第一个方块的右边去进行位移，给个200px，让它沿y轴旋转90度。把旋转位置改成left和center。见图15
图15代码
第五个方块我让它往第一个方块的上边去进行位移，给个-200px，让它沿x轴旋转90度。把旋转位置改成bottom和center。见图16
图16代码
第六个方块我让它往第一个方块的下边去进行位移，给个200px，让它沿x轴旋转-90度。把旋转位置改成top和center。见图17
图17代码
给ul定义旋转位置，就可以让立方体沿着正中心进行旋转了。滑过效果需要手动去操作，添加 @keyframes mymove{} 给它设置循环属性，立方体就可以一直旋转了。见图18、图19
语法一：@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
语法二：@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}
0% = from ; 100% = to
图18代码
图19浏览器效果
文千千
-
css立方体( 原创)
2021-06-20 03:07:36#preserve {width:200px;height:200px;transform-style:preserve-3d;position:fixed;top:200px;left:200px;/* transform:rotatey(45deg) rotatex(45deg);*/animation:rotate 5s infinite alternate;... -
css立方体
2019-12-21 21:23:01css立方体 先分别给立方体六个面6个div <div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> &... -
CSS 3D 可嵌套多层立方体图片墙
2021-04-16 18:54:45解压密码：RJ4587 之前我们为大家分享过几个基于HTML5和CSS3的3D立方体动画，比如CSS3 3D立方体...今天我们要介绍的也是一款CSS3 3D立方体图片墙，它与其他不同的是，立方体中可以嵌套小的立方体，动画效果非常不错。 -
纯css实现旋转正方体
2021-11-10 15:28:54纯css实现旋转正方体 思路： 1、建一个父div作为正方体容器，在div里面建六个子div作为正方体六个面。 2、创建关键帧，让父div旋转起来。 效果： 代码： <style> /* 设置正方体容器 */ .fu { margin: 150... -
纯CSS实现3D正方体动画效果
2020-10-05 11:32:36纯CSS实现3D正方体动画效果，此方法是通过transform的旋转（rotate）和位移（translate）实现的，具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 正文 1.基本架构 先在body里添加div作为参考，再在... -
html+css立方体旋转展示图片示例 demo.7z
2019-08-02 16:59:31html+css立方体旋转展示图片示例demo。 -
CSS3 旋转立方体问题详解
2020-11-21 20:26:44旋转立方体的效果 分析 一个容器包含6个div position：absolute 之后6个面完全重合 通过trandform：rotateX/Y/Z()，translateX/Y/Z()调整到相应位置 添加transition动画效果 注意这里面的旋转是绕着他的中心... -
用css制作旋转的立方体
2022-04-18 18:08:37实现一个旋转的立方体，只需要用css的基本属性就可以实现。我们一起看看吧~ 一：transform 基本属性 transform可以实现元素的2D或3D转换，可以对元素进行旋转，缩放，移动，倾斜等。 基本属性有： 1. 移动 ... -
CSS正方体旋转
2021-09-17 14:50:14<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...过. -
css3纯写的立方体
2021-08-04 08:39:09.box {width:200px;height:200px;transform-style:preserve-3d;position:relative;margin:100px auto 20px;transform:rotateX(20deg) rotateY(20deg);cursor:pointer;transition:all 1s;}.box:hover {transform:rota... -
通过CSS3实现旋转立方体的方法
2021-08-05 00:11:58通过CSS3实现旋转立方体的方法发布时间：2020-08-27 14:18:45来源：亿速云阅读：78作者：小新这篇文章将为大家详细讲解有关通过CSS3实现旋转立方体的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读... -
使用CSS3实现一个正方体相册
2021-07-19 20:24:17CSS3中提出了过渡，3D模型和动画的概念今天我们使用CSS3来制作一个六棱柱的相册 下面是效果预览： https://www.bilibili.com/video/BV1Rb4y1k73C?share_source=copy_web 关于代码： 首先，我们先写出六个面，... -
css3实现立方体效果
2021-08-04 08:47:13@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX... }}/*************** 水平立方体 *... -
html+css+js旋转立方体相册（可表白用哟！！）
2022-05-20 23:23:13用css+html+js 实现的一个旋转立方体相册，有背景音乐（自动循环播放，无需点击），音乐和照片可以替换，代码简单，小白也可以看懂并修改。非常nice！！！曾经有一份真挚的感情放在我的面前，我没有好好的珍惜，等到... -
CSS绘制正方体
2021-11-27 11:14:27<!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">... /*通过fontSize设置字体大小，子元素使用em,从而通过fontSize来控制正方体的大小*/ font-size: 100px; -
css 旋转立方体
2021-08-05 00:12:021.需要了解相关css样式1.position属性 值：relative\absolute;/* position进行定位，父元素的position属性值为relative相对定位，子元素的position属性值为absolute相对定位*/position:relative;position:absolute;2... -
3D立方体旋转相册.html
2020-06-07 14:37:133D立方体旋转相册，利用了CSS和HTML，换掉图片可以直接拿来用 -
纯css3 立方体
2018-10-08 16:49:48该html代码可以实现立方体，而且该立方体是用纯css3编辑的，还可以旋转。 -
CSS3 3D立方体拆分动画特效代码
2021-03-20 03:28:46CSS3 3D立方体动画代码，3D立方体旋转动画，鼠标移动到3D立方体，拆分动画。 -
CSS3实现3D立方体
2021-08-04 07:59:32利用CSS3 animation及transform实现一个404立方体盒子点击查看效果Paste_Image.png3D立方体*{margin: 0;padding: 0;}body{background: #000;}.box{width: 200px;height: 200px;margin: 200px auto 0;position: ... -
html+css立方体特效
2019-08-20 15:48:38<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>长方体特效</title> <style type="text/css"> ul{ ... -
css3实现3d效果的立方体动画
2021-12-16 16:18:15纯css3动画写的立方体动画，只需要css即可实现立方体的旋转动画 -
HTML + CSS 实现动态立方体
2022-02-15 19:48:30initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML + CSS 实现立方体title> <style> ul { padding: 0; margin: 0; list-style: none; margin: 260px auto; width: 300px; ... -
一款利用html5和css3实现的3D立方体旋转效果教程
2021-01-19 18:14:18如何利用CSS3实现3D变换、立方体旋转效果，本文为大家分享实现思路，供大家参考，具体内容如下 3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d; transform-style(preserve-3d)建立3D空间 ...
