html5制作旋转正方体,如何制作一个旋转的正方体
html>
正方体
html
{
background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
height: 100%;
}
#window {
width: 20em;
height: 20em;
position: absolute;
left: 50%;
top:50%;
margin-left: -10em;
margin-top: -10em;
-webkit-perspective: 1000px;
}
#box{
-webkit-animation: 6s spin linear infinite;
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-20deg) rotateY(-20deg);
}
.face {
background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
color: #77ffb9;
box-shadow: inset 0 0 5em rgba(125, 125, 125, 0.8);
}
#face-front {
transform: translateZ(10em);
}
#face-left {
-webkit-transform: rotateY(-90deg) translateZ(10em);
}
#face-top {
-webkit-transform: rotateX(90deg) translateZ(10em);
}
#face-right {
-webkit-transform: rotateY(90deg) translateZ(10em);
}
#face-bottom {
-webkit-transform: rotateX(-90deg) translateZ(10em);
}
#face-back {
-webkit-transform: rotateX(180deg) translateZ(10em);
}
@-webkit-keyframes spin
{
from
{
-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to
{
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
X:
οnchange="ratate()"
/>
Y:
/>
function ratate()
{
var x = document.getElementById('changex').value;
var y = document.getElementById('changey').value;
document.getElementById('window').style.webkitPerspectiveOrigin =
x+"% "+y+"%";
}
html5制作旋转正方体,如何制作一个旋转的正方体相关推荐
- html5 摆动的花朵,CSS3实现一个旋转的花朵
要效果图如下: 实现原理: 其实很简单,就是中间的圆圈定位在中间,其他的6个圆圈,进行不同的绝对定位,然后进行旋转! 代码: CSS实现的旋转的花朵 *{ margin: 0; padding: 0; ...
- 旋转——绕原点二维旋转,绕任意点的二维旋转,三维基本旋转,绕任意轴的三维旋转
1 简介 计算机图形学中的应用非常广泛的变换是一种称为仿射变换的特殊变换,在仿射变换中的基本变换包括平移.旋转.缩放.剪切这几种.本文以及接下来的几篇文章重点介绍一下关于旋转的变换,包括二维旋转变换. ...
- css旋转按钮制作,css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用css3创建一个旋转,旋转,可变色按钮. 这是一个演示旋转的css3按钮.让我们先从html: 复制代码代码如下: ...
- 谷歌气球 simplekml 《八》地图动画之旋转动画的制作-全网唯一
谷歌气球 simplekml 入门<一> 谷歌气球 simplekml 入门<二> 谷歌气球 simplekml 入门<三> 谷歌气球 simplekml 入门&l ...
- css旋转风车的制作一
css旋转风车的制作一 旋转效果其实很简单就是个transform;animation动画.效果如图: 主要是这个风筝的制作,运用到了border边框的原理: 假如给一个没有宽高的div盒子各个方向设 ...
- 三步教会你旋转动画的制作
三步教会你旋转动画的制作 对于一些可以旋转的装配体该如何制作动画呢?这里要用到旋转马达命令,接下来我说说具体的操作步骤. 1.点击运动算例后,然后点击马达如下图所示. 2.在出现的对话框中,在零部件下 ...
- 用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- html5作品展示的动效,HTML5 动效的常见制作方法
智唯网络为你推出众所周知,HTML5 动效的常见制作方法.一个元素,动往往比静更吸引眼球;一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的动画特效定能助力传播和品 ...
- CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 一.transform-origin transform-o ...
- 运用计算机来动画制作的视频,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...
今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...
最新文章
- Spark知识体系完整解读
- 零基础,最完整的WordPress建站教程
- boost::gil模块实现打包像素格式的测试程序
- android 控件资源命名规范,Android 资源命名规范整理
- mac虚拟机vm屏幕一直闪烁_VM虚拟机VMware Fusion Pro 11
- linux 免密登录
- axure6.5汉化
- 破解Access(*.mdb)目前所有版本的密码
- 计算机硬件技术基础教程mcs-51单片机原理及应用,mcs51单片机原理及应用
- 刚刚,华为发布白皮书,重新定义智慧园区!
- android 微信小程序 gps 飘,微信小程序实现自动定位功能
- 【python练习】摘苹果题
- 5g计算机云,uawei云电脑+5G:手机能当电脑用了
- 淘宝电商创业可能会面临哪些问题?
- microLED应该会取代OLED的
- matlab实现密堆立方体,LAMMPS如何定义六角密堆结构HCP
- C++ 覆盖方法与重载方法
- 用 PHP 来刷leetCode 之 四数之和
- linux cocoapods安装过程,CocoaPods安装过程详细
- Java邮件收发,以及获取收件箱和发件箱 自测可用 使用JavaMail