精华内容
下载资源
问答
  • 利用html5制作正方体,同时实现3D旋转效果
    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

    更多相关内容
  • 首先设置盒子的属性,其中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正方体旋转动画
  • HTML5 纯CSS3实现正方体旋转3D效果

    万次阅读 2020-11-27 18:52:39
    DOCTYPE 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>
    

     

    展开全文
  • 感觉还是比较简单的,直接上图:要做出的效果就是这个立体的正方体,然后再让它自己不停地转动代码展示: &lt;!DOCTYPE html&...旋转正方体&lt;/title&gt; &lt;style&gt; *{

    感觉还是比较简单的,直接上图:

    要做出的效果就是这个立体的正方体,然后再让它自己不停地转动

    代码展示: 

    <!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: 关于旋转轴: 经过试验,没错的话就是下图所示:

                        

               与我们平时数学里面的不相同;


    展开全文
  • 如何利用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效果。
  • 2d特效 transform:translateX(); x轴平移 transform: translateY(); y轴平移 transform:translateZ(); z轴平移 transform:rotateX(); x轴旋转 transform:rotateY(); ...
  • DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;amp;quot;zh&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp
  • 之前对于HTML5立方体动画我们已经有过不少分享了,像这款HTML5/CSS3 3D立方体扭曲动画、HTML5 3D立方体旋转动画都非常不错。今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意面,同时也可以在...
  • 3D立方体旋转相册.html

    2020-06-07 14:37:13
    3D立方体旋转相册,利用了CSS和HTML,换掉图片可以直接拿来用
  • 之前我们分享过很多非常不错的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)源码 主要知识点: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;
  • rotate3d与translate3d的参数为:(0/1,0/1,0/1,deg/px) 0代表不旋转或移动,1代表旋转或移动,最后一个参数为旋转的角度或移动的距离perspective(px) 是transform中的属性,代表视角,距离越小元素变化越夸张关于Z轴...
  • HTML+CSS 3d旋转正方体

    2022-05-10 20:31:41
    HTML+CSS 3d旋转正方体
  • html <div class="box-parent"> <span class="box-children">1</span> <span class="box-children">2</span> <span class="box-children">3</span> <span class=...
  • html: bg1 bg2 bg3 bg4 css: .container { ... transform-style: preserve-3d; animation: moves 3.5s linear infinite; } .back,.prev { position: absolute; width: 100px; height: 10
  • 2.3D正方体旋转动画相册2中实现方式; 3.3D旋转木马立体动画相册; 4.表白示爱文字+动画爱心,情人节礼物,纪念日; 5.炫酷万花筒动画实现,可鼠标或触屏交互 下载解压后浏览器打开页面即可看到效果。
  • 本资源有visual c++与openGL编写。可生成可旋转正方体
  • 下载打开index.html即可,博客地址: https://blog.csdn.net/qq_30750609/article/details/103115598
  • 基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件...来获得鼠标在X轴、Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果HTML代码块:/...
  • 制作好看的3D动态旋转正方体 效果展示入口 制作方法主要运用css3中的animation 和 transform. 1. 先在html中创建出大div(正方体整体),并在其中创建出6个小div(正方体6个面)。 2. 然后在css中先将基本位置和大小...
  • 使用HTML+CSS设置一个3d旋转的盒子
  • HTML 5 大小正方体旋转特效 代码,纯css3 滑动 展开特效

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,421
精华内容 568
关键字:

html3d旋转正方体