以正方体一个顶点进行旋转的3D立方体动画

话不多说，直接上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旋转的立方体</title></head><style>html,body{margin: 0;padding: 0;}/* 给每个div设置宽高，水平垂直居中 */.container,.container .outer,.container .inner,.container .inner div{width: 10rem;height: 10rem;font-size: 1.8rem;text-align: center;line-height: 10rem;}/* 设置container的旋转效果，取名为roate_y,4秒、线性变化、无线循环 */.container{margin: 0 auto;animation: roate_y 4s linear infinite;transform-style: preserve-3d;}/* 立方体以Y轴为中心，旋转360度 之后每4s重复*/@keyframes roate_y{from{transform: rotateY(0);}to{transform: rotateY(360deg);}}/* 将正着面对我们的立方体绕X轴旋转55度* 即本来“下”有4个点在水平，旋转后只有两个点在下面*/.container .outer{transform-style: preserve-3d;transform: rotateX(55deg);}/*  在上面的基础上绕Y轴旋转，最后“下”只有一个点在下面，* 也就我们看到立方体的一个点支撑起整个立方体的效果*/.container .inner{transform-style: preserve-3d;transform: rotateY(45deg);position: relative;}.container .inner div{transform-style: preserve-3d;position: absolute;opacity: 0.5;}/* 单独设置每个面的旋转角度 */.container .plane-1{/* 设置右向右移-80px，并绕Y轴旋转90度，我们看到的效果是一条竖线“|”，*  因为后面的面积被“|”挡住了，下面的每个面同理。* 即每个面初始是面对我们的，即“口”，然后我们需要对齐进行旋转和移动得到正方体的每个面*/background: rgba(127,127,255,0.3);right: -5rem;transform: rotateY(90deg);}.container .plane-2{background: rgba(127,255,255,0.3);left: -5rem;transform: rotateY(90deg);}.container .plane-3{background: rgba(127,255,255,0.3);transform: translateZ(-5rem);}.container .plane-4{background: rgba(0,255,255,0.3);transform: translateZ(5rem);}.container .plane-5{background: rgba(0,225,127,0.3);transform: rotateX(-90deg);bottom: -5rem;}.container .plane-6{background: rgba(127,127,127,0.3);transform: rotateX(-90deg);top: -5rem;}img{width: 10rem;height: 10rem;}</style><body><br><br><br><br><br><div class="container"><div class="outer"><div class="inner"><div class="plane-1"><img src="./images/1.png" alt="" /></div><div class="plane-2"><img src="./images/2.png" alt="" /></div><div class="plane-3"><img src="./images/3.png" alt="" /></div><div class="plane-4"><img src="./images/4.png" alt="" /></div><div class="plane-5"><img src="./images/5.png" alt="" /></div><div class="plane-6"><img src="./images/6.png" alt="" /></div></div></div></div></body>
</html>

爱的魔力转圈圈，来看看最后的效果，大概就是这么个死样子了，哈哈！

交流

1、QQ群：可添加qq群共同进阶学习：进军全栈工程师疑难解群号: 856402057
2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！

以正方体一个顶点进行旋转的3D立方体动画相关推荐

java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
界面实例--旋转的3d立方体
好吧,这里直接编辑源码并不允许设置css和js--毕竟会有危险--那直接放代码吧 <!DOCTYPE html> <html><head><meta char ...
python利用turtle库绘制正方形绕一个顶点旋转
利用turtle库绘制正方形绕一个顶点旋转程序如下 import turtle as t t.setup(600,600)#定义窗口尺寸 t.pensize(2.5) for i in range( ...
unity创建一个6面体的3D模型，确保它每一个面都是不同的。能旋转每一个面唤醒不同的物品
文章目录前言 unity创建一个6面体的3D模型,确保它每一个面都是不同的.能旋转每一个面唤醒不同的物品一.物体每一面旋转停止呼出不同面板二.使用步骤 1.控制旋转与唤醒总结前言 unity ...
教你用CSS3画一个透视、旋转的正方体
教你用CSS3画一个透视.旋转的正方体正方体六个面,无非就是,将每个面进行translateZ提升/降低边长的一半,然后再进行rotate X/rotate Y (n*90deg)的旋转即可. ht ...
用CSS实现3D魔方动画旋转
一.3D魔方的实现这里呢主要是用我们的div标签来对魔方的各个面及各个块进行实现,先上一个主体的html代码吧 <div id="box"><!-- 各个面 - ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
JavaScript实现图片旋转构成3D圆环代码
代码简介: 很炫的图片展示特效,由一组图片构成一个3D的圆环状,并自动旋转,鼠标放到某一图片上会自动停止,JavaScript 的功能真够强大,你是不是后悔没有学好JS呢? 代码内容: View Co ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
第七章：CSS3基础---变形旋转 2d/3d、c3边框图片、变形缩放 2d/3d、变形倾斜2d、动画属性
<1..变形旋转 2d/3d> x轴旋转 transform:rotateX(数值deg) y轴旋转 transform:rotateY(数值deg) z轴旋转 transform:rot ...

以正方体一个顶点进行旋转的3D立方体动画

话不多说，直接上代码

以正方体一个顶点进行旋转的3D立方体动画相关推荐

最新文章

热门文章