-
2021-06-08 16:31:44
.eyes{
perspective: 1000px;
}
.box{
/*设置3D效果*/
transform-style: preserve-3d;
/*盒子的大小*/
width: 200px;
height: 200px;
background: red;
/*设置盒子的位置，便于观察*/
margin: 400px auto;
/*复合方式设置动画 三者分别为：动画名 执行一次时间 执行方式*/
animation: zhuan 2s ease;
/*令动画无限执行下去*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box div{
width: 200px;
height: 200px;
opacity: 0.5;
/*设置过渡*/
transition: all 1s ease 0s;
position: absolute;
}
/*调整位置，制作成一个六边形*/
.box .div1{
background: blue;
transform: translateZ(100px);
}
.box .div2{
background: green;
transform: translateZ(-100px);
}
.box .div3{
background: yellow;
transform: rotateX(90deg) translateZ(100px);
}
.box .div4{
background: green;
transform: rotateX(270deg) translateZ(100px);
}
.box .div5{
background: gray;
transform: rotateY(-90deg) translateZ(100px);
}
.box .div6{
background: brown;
transform: rotateY(90deg) translateZ(100px);
}
/*添加3D旋转效果 让其绕X、Y轴同时旋转90度*/
@keyframes zhuan{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
/*给正方体添加一个hover效果*/
.box:hover .div1{
transform: translateZ(200px);
}
.box:hover .div2{
transform: translateZ(-200px);
}
.box:hover .div3{
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .div4{
transform: rotateX(270deg) translateZ(200px);
}
.box:hover .div5{
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .div6{
transform: rotateY(90deg) translateZ(200px)
}
原文：http://www.cnblogs.com/dingsaifengIT/p/5732839.html
更多相关内容 -
html+css制作3D旋转正方体特效
2021-12-28 19:13:30首先设置盒子的属性，其中transform-style:preserve-3d则是将盒子定义为3d形式，用于制作正方体,而animation:rotateAnimate 10s linear infinite;则是与以下部分相对应，用于创建动画同时设置动画执行一次的时长。 ...展开全文
制作方法：
html部分：
- 连接css
- 定义大盒子放入想要的图片（此处我直接在放入图片时直接定义了图片的大小，并不规范）
css部分：
首先设置盒子的属性，其中transform-style:preserve-3d则是将盒子定义为3d形式，用于制作正方体,而animation:rotateAnimate 10s linear infinite;则是与以下部分相对应，用于创建动画同时设置动画执行一次的时长。
在设置动画之前还要将插入的图片的位置设置成为一个正方体，此时需要对每张图片设置不同的角度，代码如下：
经过如此设置以后，插入的图片就可以成为一个正方体，在结合上面的动画设置就可以达到正方体不停旋转的效果。
最后，还可以在此基础上增加鼠标移入正方体打开的功能，代码如下：
（在设置过程中一定要注意hover后面的空格！！！！）
-
HTML5 3D正方体旋转动画
2019-11-24 17:59:09HTML5 3D正方体旋转动画 -
HTML5 纯CSS3实现正方体旋转3D效果
2020-11-27 18:52:39DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #aa{ margin: 100px auto; width: 200px; height: ...展开全文实现效果：
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #aa{ margin: 100px auto; width: 200px; height: 200px; transform-style: preserve-3d; position: relative; transform: rotateX(-15deg) rotateY(45deg); animation: name 6s linear 100ms infinite; } .bb{ position: absolute; width: 100px; height: 100px; left: 0; right: 0; background-color: rgba(232,222,45,0.6); } .qian{ transform: translateZ(50px); background-color: rgba(23,22,4,0.6); } .hou{ transform: translateZ(-50px); background-color: rgba(23,122,56,0.6); } .zuo{ transform: rotateY(270deg) translateZ(-50px); background-color: rgba(223,122,74,0.6); } .you{ transform: rotateY(270deg) translateZ(50px); background-color: rgba(13,22,254,0.6); } .shang{ transform: rotateX(270deg) translateZ(-50px); background-color: rgba(223,12,144,0.9); } .xia{ transform: rotateX(270deg) translateZ(50px); background-color: rgba(23,252,144,0.6); } @keyframes name{ from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);} to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);} } </style> </head> <body> <div id="aa"> <div class="bb qian"></div> <div class="bb hou"></div> <div class="bb zuo"></div> <div class="bb you"></div> <div class="bb shang"></div> <div class="bb xia"></div> </div> </body> </html>
-
HTML5 利用CSS3 中的3D 模块绘制一个旋转3D正方体
2018-06-05 16:59:10感觉还是比较简单的，直接上图:要做出的效果就是这个立体的正方体，然后再让它自己不停地转动代码展示: <!DOCTYPE html&...旋转正方体</title> <style> *{展开全文感觉还是比较简单的，直接上图:
要做出的效果就是这个立体的正方体，然后再让它自己不停地转动
代码展示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋转正方体</title> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; position: relative; left: 300px; top: 250px; border: 1px solid black; background-color: white; transform: rotateX(-10deg); background-color: gray; transform-style:preserve-3d ; animation: change 6s linear 0s infinite normal; } @keyframes change{ from{ transform: rotateY(0deg) rotateX(0deg); } to{ transform: rotateY(360deg) rotateX(360deg); } } ul li{ list-style: none; width: 100%; height: 100%; position: absolute; text-align: center; left: 0; top: 0; } ul li:nth-child(1){ background-color: red; transform: translate(-100px) rotateY(90deg); } ul li:nth-child(2){ background-color: blue; transform: translate(100px) rotateY(90deg); } ul li:nth-child(3){ background-color: orange; transform: translateZ(100px); } ul li:nth-child(4){ background-color: green; transform: translateZ(-100px); } ul li:nth-child(5){ background-color: black; transform: translateY(100px) rotateX(90deg); } ul li:nth-child(6){ background-color: chocolate; transform: translateY(-100px) rotateX(90deg); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
一.关于动画模块animation:
一共有三要素:
1.告诉系统需要执行哪一个动画(如lnj)
格式: animation-name: 名称(lnj);
3. 此动画要持续的时间
格式: animation-duration: 3s;
2.自己创建那个名称为(如lnj)的动画
格式:
@keyframes 名称 {
from{
属性: 值;
}
//告诉系统要从哪个状态变化到哪个状态
to{
属性: 值;
}
}
补充1:
改变任意多的样式的次数:
百分比来规定变化发生的时间,或用关键词"from"和"to"等同于0%和100%
动画的其他一些属性:
animation-iteration-count 规定动画被播放的次数,默认是1
animation-timing-function 规定动画的速度曲线, 默认是 "ease"
animation-delay 规定动画何时开始。默认是 0
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
"alternate" : 动画做往返变化
animation-iteration-count 规定动画被播放的次数。默认是 1
animation: myfirst 5s linear 2s infinite alternate;
animation : (name) (duration) (timing-function) (delay) (iteration-count) (direction);
简写模式: animation: 动画名称 动画时长;
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"(puased)
二.:关于transform
transform属性向元素应用2D或者3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜.
1.旋转:
transform: rotateX(); transform: rotateY(); transform: rotatZ();
2.缩放:
transform: scale()定义2D缩放转换.
transform: scaleX()通过设置X轴的值来定义缩放转换.
3.转换:
transform: translate()定义2D转换
transform: translateX()定义转换,只是用X轴的值
4.倾斜:
transform: skewX(angle) 定义沿着X轴的2D倾斜转换perspective(n) 为 3D 转换元素定义透视视图 (近大远小效果)
补充2: 关于旋转轴: 经过试验，没错的话就是下图所示:
与我们平时数学里面的不相同；
-
一款利用html5和css3实现的3D立方体旋转效果教程
2021-01-19 18:14:18如何利用CSS3实现3D变换、立方体旋转效果，本文为大家分享实现思路，供大家参考，具体内容如下 3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d; transform-style(preserve-3d)建立3D空间 ... -
html5 3D旋转立方体
2018-07-19 09:36:35使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。 -
html3d正方体(可以旋转互动)
2022-03-21 09:18:242d特效 transform:translateX(); x轴平移 transform: translateY(); y轴平移 transform:translateZ(); z轴平移 transform:rotateX(); x轴旋转 transform:rotateY(); ... -
利用html和CSS3制作一个简单的3D旋转正方体。
2019-03-15 16:17:10DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;quot;zh&amp;amp;amp;amp;amp;quot;&amp;amp -
HTML5 3D正方体特效 可任意面旋转定位
2019-08-23 17:10:15之前对于HTML5立方体动画我们已经有过不少分享了，像这款HTML5/CSS3 3D立方体扭曲动画、HTML5 3D立方体旋转动画都非常不错。今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意面，同时也可以在... -
3D立方体旋转相册.html
2020-06-07 14:37:133D立方体旋转相册，利用了CSS和HTML，换掉图片可以直接拿来用 -
HTML5 3D正方体旋转动画 很酷的3D特效
2019-08-23 17:12:53之前我们分享过很多非常不错的HTML5 3D立体动画特效，尤其是一些HTML5 Canvas动画...今天我们又要来分享一款好玩的HTML5 3D效果，该特效是一个可以旋转播放的正方体，你可以从多个视角来查看正方体，非常不错的3D效果。 -
3D正方体旋转
2021-04-16 11:43:14使用css3的transform属性和动画效果制作一个自动旋转的3D正方体盒子 需要使用css3中的transform属性和@keyframes规则 正方体制作需要旋转rotate、景深（视距）perspective、3D规则transform-style：preserve-3d ... -
3D正方体旋转相册.html
2021-06-09 04:05:13自己随便改名都可以，会显示在标题body{background:rgba(0, 0, 0, 1.0);/*更改背景颜色*/}* {margin:0;padding:0;}video{opacity: 0.1;width: 50%;height: 20px;transition: 0.5s;left: 25%;bottom: 20px;... -
3D旋转立方体(HTML+CSS3)源码.rar
2020-02-01 17:51:113D旋转立方体(HTML+CSS3)源码 主要知识点：css3的transform，rotate，translate，animation等动画， 以perspective，transform-style等属性为辅助 -
css3D旋转正方体
2021-02-19 22:57:39<html> <head> <title>3D立方体</title> <style> .top { background-color: blue; width: 200px; height: 200px; position: absolute; -
HTML5 CSS3 实现旋转的3D正方体
2021-06-12 04:09:58rotate3d与translate3d的参数为：(0/1,0/1,0/1,deg/px) 0代表不旋转或移动，1代表旋转或移动，最后一个参数为旋转的角度或移动的距离perspective(px) 是transform中的属性，代表视角，距离越小元素变化越夸张关于Z轴... -
HTML+CSS 3d旋转正方体
2022-05-10 20:31:41HTML+CSS 3d旋转正方体 -
transform实现简单3D立体正方体旋转
2021-11-28 17:35:44html <div class="box-parent"> <span class="box-children">1</span> <span class="box-children">2</span> <span class="box-children">3</span> <span class=... -
css3 手写正方体实现3D旋转
2021-01-08 10:16:00html： bg1 bg2 bg3 bg4 css： .container { ... transform-style: preserve-3d; animation: moves 3.5s linear infinite; } .back,.prev { position: absolute; width: 100px; height: 10 -
html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐
2021-07-16 15:01:352.3D正方体旋转动画相册2中实现方式； 3.3D旋转木马立体动画相册； 4.表白示爱文字+动画爱心，情人节礼物，纪念日； 5.炫酷万花筒动画实现，可鼠标或触屏交互 下载解压后浏览器打开页面即可看到效果。 -
3D正方体可旋转Demo 源代码
2010-09-28 19:07:02本资源有visual c++与openGL编写。可生成可旋转的正方体。 -
抖音很火的3d旋转相册（修改了尺寸版）
2019-12-23 12:04:17下载打开index.html即可，博客地址: https://blog.csdn.net/qq_30750609/article/details/103115598 -
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2021-06-12 02:53:21基于css3新属性transform，实现3d立方体的旋转通过原生JS，点击事件...来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：/... -
制作好看的3D动态旋转正方体
2020-01-03 15:46:34制作好看的3D动态旋转正方体 效果展示入口 制作方法主要运用css3中的animation 和 transform. 1. 先在html中创建出大div(正方体整体)，并在其中创建出6个小div(正方体6个面)。 2. 然后在css中先将基本位置和大小... -
用动画做出一个正方体并且3d旋转，详解
2021-11-28 23:58:07使用HTML+CSS设置一个3d旋转的盒子 -
正方体 旋转 滑动（源码）
2018-09-14 12:43:40HTML 5 大小正方体旋转特效 代码，纯css3 滑动 展开特效
