-
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空间 ...