html5把六张图片做成立方体,HTML5绘制在立方体上的几何曲线图形

CSS

语言：

CSSSCSS

确定

body {

background: #222;

width: 100vw;

height: 100vh;

overflow: hidden;

-webkit-filter: blur(1px);

filter: blur(1px);

box-sizing: border-box;

-webkit-perspective: 3000px;

perspective: 3000px;

}

.cube {

position: absolute;

width: 250px;

height: 250px;

top: 50%;

left: 50%;

margin: -125px -125px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateX(-30deg) rotateY(45deg);

transform: rotateX(-30deg) rotateY(45deg);

-webkit-animation: rotation 30s linear infinite;

animation: rotation 30s linear infinite;

}

.cube div,

.cube canvas {

width: 246px;

height: 246px;

position: absolute;

border: 2px solid white;

background: #000;

}

.cube .left {

-webkit-transform: rotateY(-90deg) translateZ(125px);

transform: rotateY(-90deg) translateZ(125px);

}

.cube .right {

-webkit-transform: rotateY(90deg) translateZ(125px);

transform: rotateY(90deg) translateZ(125px);

}

.cube .back {

-webkit-transform: rotateY(180deg) translateZ(125px);

transform: rotateY(180deg) translateZ(125px);

}

.cube .front {

-webkit-transform: rotateX(0deg) translateZ(125px);

transform: rotateX(0deg) translateZ(125px);

}

.cube .top {

-webkit-transform: rotateX(90deg) translateZ(125px);

transform: rotateX(90deg) translateZ(125px);

}

.cube .bottom {

-webkit-transform: rotateX(-90deg) translateZ(125px);

transform: rotateX(-90deg) translateZ(125px);

}

@-webkit-keyframes rotation {

0% {

-webkit-transform: rotateX(-30deg) rotateY(45deg);

transform: rotateX(-30deg) rotateY(45deg);

}

100% {

-webkit-transform: rotateX(330deg) rotateY(405deg);

transform: rotateX(330deg) rotateY(405deg);

}

@keyframes rotation {

0% {

-webkit-transform: rotateX(-30deg) rotateY(45deg);

transform: rotateX(-30deg) rotateY(45deg);

}

100% {

-webkit-transform: rotateX(330deg) rotateY(405deg);

transform: rotateX(330deg) rotateY(405deg);

}

html5把六张图片做成立方体,HTML5绘制在立方体上的几何曲线图形相关推荐

html5把六张图片做成立方体,一篇文章教会你利用html5和css3实现3D立方体效果图...
[一.项目背景] 随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果. [二.项目分析] 想要利用CSS3 ...
html5把六张图片做成立方体,html5 3D旋转的图片立方体代码
特效描述:html53D 旋转的图片立方体.html5 css3转换属性创建3D旋转立方体多维数据图片库代码. 代码结构 1. HTML代码单击下面的图片来旋转立方体. //DOM load eve ...
python 3d绘图立方体_python绘制3D立方体
我想绘制一个平行六面体.其实我从python脚本开始画立方体为:python绘制3D立方体 import numpy as np from mpl_toolkits.mplot3d import Ax ...
用仿ActionScript的语法来编写html5——第六篇，TextField与输入框
用仿ActionScript的语法来编写html5--第六篇,TextField与输入框一,对比 1,html5中首先看看在html5的canvas中的文字显示 var canvas = docu ...
把图片做成html,HTML5实践-图片设置成灰度图
以前,在web上要显示灰度图片的话,只有手工使用图片软件转换.但是现在借助于html5的canvas可以实现这个过程,而不需要再借助图片编辑软件了.我用html5和jquery做了一个demo,来展示 ...
【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面
弧度一块可能有误,需要再研究导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上 ...
六张图片形成立方体并旋转
用六张图片整合成一个立方体,加一个旋转的动画,即构成如上效果. 代码吐下: <!DOCTYPE html> <html lang="en"><head ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
html绘制城堡,网页上的虚幻3，HTML5版《史诗城堡》体验
拼命加载中 ... Mozilla一直致力于HTML5的发展.在去年发布Android版Firefox浏览器后,Mozilla便发布了基于HTML5开发.并支持所有HTML5应用的Firefo ...

html5把六张图片做成立方体,HTML5绘制在立方体上的几何曲线图形

html5把六张图片做成立方体,HTML5绘制在立方体上的几何曲线图形相关推荐

最新文章

热门文章