精华内容
下载资源
问答
  • 旋转立方体

    2013-09-09 11:06:39
    旋转立方体
  • 旋转立方体:直径较小的新型超立方体
  • 旋转立方体 展开切换

    2019-09-08 23:39:26
    旋转立方体 展开切换
  • 旋转立方体相册.rar

    2020-11-04 09:41:11
    本相册使用HTML+CSS+JS实现旋转立方体相册,图片可手动添加到固定路径,当鼠标移动到立方体时可实现立方体展开。鼠标左键单击形成爱心。
  • HTML5制作3D旋转立方体

    2021-03-26 16:45:06
    HTML5制作3D旋转立方体
  • 内容索引:VC/C++源码,图形处理,3D VC++旋转立方体,以前本人写过一次,现在又修改升级了代码,主要是对旋转立方体进行适时控制,通过拖动滚动条,改变立方体的视角,达到三维旋转效果,源代码简单开源,希望VC的...
  • Openg旋转立方体

    2012-11-23 16:28:10
    基于vc中用opengl写旋转立方体 三维
  • 纯CSS3 3D旋转立方体动画
  • 旋转立方体
    功能&&效果图:

    在这里插入图片描述

    本案例是旋转的立方体,整体由两个立方体组成。外面有一个大的正方体,内部有一个小的正方体,整个正方体一开始呈闭合状态,并自由旋转,当鼠标悬浮时,大小正方体展开。

    结构部分:
    <body>
    		<div class="box">
    			<div><img src="img/01.png" alt="" /></div>
    			<div><img src="img/02.png" alt="" /></div>
    			<div><img src="img/03.png"/></div>
    			<div><img src="img/04.png"/></div>
    			<div><img src="img/05.png"/></div>
    			<div><img src="img/06.png"/></div>
    			<div class="d1"><img src="img/bg01.jpg"/></div>
    			<div class="d1"><img src="img/bg1.jpg"/></div>
    			<div class="d1"><img src="img/bg2.jpg"/></div>
    			<div class="d1"><img src="img/bg3.jpg"/></div>
    			<div class="d1"><img src="img/bg4.jpg"/></div>
    			<div class="d1"><img src="img/bg5.jpg"/></div>
    		</div>
    	</body>
    

    结构部分主要分为两个部分,一个是外部的大立方体(d1),一个是内部的小立方体

    <style type="text/css">
    			body {
    				background: url(img/b.jpg);
    				background-size: cover;
    			}
    			.box {  //给box设置动画
    				transform: rotateZ(-45deg);
    				border: 1px solid red;
    				margin: 280px auto;
    				width: 300px;
    				height: 300px;
    				position: relative;
    				animation-duration:5s; //设置周期时间
    				animation-name:name ; //动画关键帧名称
    				animation-timing-function:linear ; //设置运动曲线
    				animation-iteration-count: infinite; 播放次数:无限循环
    				transition: all 1s;
    				transform-style: preserve-3d; //开启3D,以3D效果显示
    			}
    			.box div {
    				margin: 50px 0 0 50px;
    				transition: all 1s;
    				height: 200px;
    				width: 200px;
    				position: absolute;
    				opacity: .5;
    				/*border-radius: 50%;*/
    			}
    			img {
    				width: 200px;
    				height: 200px;
    			}
    			.d1 img {
    				width: 400px;
    				height: 400px;
    			}
    			@keyframes name{//动画的效果,以各个轴为基准旋转360度
    				from{transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)}
    				to{transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)}
    			}
    			.box .d1 {
    				width: 400px;
    				height:400px;
    				background-color: darkgray;
    				left: -50px;
    				top: -50px;
    				margin: 0;
    				padding: 0;
    				opacity: 1;
    				border: 1px solid red;
    			}
    			
    			//设置小盒子每个面离原点(z轴距离)100px,并且每个面做一定的旋转,围成一个正方体
    			.box div:nth-child(1) {
    				background-color: skyblue;
    				transform: translateZ(100px); 
    			}
    			.box div:nth-child(2) {
    				transform: rotateY(90deg) translateZ(100px);
    				background-color: red;
    			}
    			.box div:nth-child(3) {
    				transform: rotateY(90deg) translateZ(-100px);
    				background-color: yellow;
    			}
    			.box div:nth-child(4) {
    				transform: rotateX(90deg) translateZ(100px);
    				background-color: pink;
    			}
    			.box div:nth-child(5) {
    				transform: rotateX(90deg) translateZ(-100px);
    				background-color: orange;
    			}
    			.box div:nth-child(6) {
    				transform: translateZ(-100px);
    				background-color: blue;
    			}
    			
    			
    			
    			//设置鼠标悬浮时,小盒子的变化:
    			  //每个面离原点的距离变为150px,每个面就不会挨在一起,有一定的距离
    			.box:hover div:nth-child(1) {
    				transform: translateZ(150px);
    			}
    			.box:hover div:nth-child(2) {
    				transform: rotateY(90deg) translateZ(150px);
    			}
    			.box:hover div:nth-child(3) {
    				transform: rotateY(90deg) translateZ(-150px);
    			}
    			.box:hover div:nth-child(4) {
    				transform: rotateX(90deg) translateZ(150px);
    			}
    			.box:hover div:nth-child(5) {
    				transform: rotateX(90deg) translateZ(-150px);
    			}
    			.box:hover div:nth-child(6) {
    				transform: translateZ(-150px);
    			}
    
    
    			 //设置大盒子每个面离原点(z轴距离)200px,且每个面做一定角度的旋转,围成正方体
    			.box div:nth-last-child(6) {
    				transform: translateZ(200px);
    			}
    			.box div:nth-last-child(5) {
    				transform: rotateY(90deg) translateZ(200px);
    			}
    			.box div:nth-last-child(4) {
    				transform: rotateY(90deg) translateZ(-200px);
    			}
    			.box div:nth-last-child(3) {
    				transform: rotateX(90deg) translateZ(200px);
    			}
    			.box div:nth-last-child(2) {
    				transform: rotateX(90deg) translateZ(-200px);
    			}
    			.box div:nth-last-child(1) {
    				transform: translateZ(-200px);
    			}
    			
    			
    			//设置鼠标悬浮时,大盒子的变化:
    			  //每个面离原点的距离变为300px,每个面就不会挨在一起,有一定的距离,并且每个面的透明度发生改变,
    			  这样就能看到里面的小盒子状态
    			.box:hover div:nth-last-child(6) {
    				opacity: .5;
    				transform: translateZ(300px);
    			}
    			.box:hover div:nth-last-child(5) {
    				opacity: .5;
    				transform: rotateY(90deg) translateZ(300px);
    			}
    			.box:hover div:nth-last-child(4) {
    				opacity: .5;
    				transform: rotateY(90deg) translateZ(-300px);
    			}
    			.box:hover div:nth-last-child(3) {
    				opacity: .5;
    				transform: rotateX(90deg) translateZ(300px);
    			}
    			.box:hover div:nth-last-child(2) {
    				opacity: .5;
    				transform: rotateX(90deg) translateZ(-300px);
    			}
    			.box:hover div:nth-last-child(1) {
    				opacity: .5;
    				transform: translateZ(-300px);
    			}
    		</style>
    
    结果
    展开全文
  • CSS3-3D动画制作旋转立方体 3D动画是CSS3才有的属性,制作立方体的思路是使用6个正方形div,通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面,旋转后Z轴和位移是对新的面来...
  • openGL 旋转立方体

    2011-12-21 14:04:13
    使用openGL 绘制的旋转立方体,很不错,学习好用啊
  • Opengl旋转立方体

    2011-11-14 11:24:11
    关于利用Opengl制作旋转立方体的简单例子,分享学习一下
  • 旋转立方体的效果   分析 一个容器包含6个div position:absolute 之后6个面完全重合 通过trandform:rotateX/Y/Z(),translateX/Y/Z()调整到相应位置 添加transition动画效果 注意这里面的旋转是绕着他的中心...
  • 立方体 在ASCII中实时渲染的旋转立方体
  • 旋转立方体相册

    千次阅读 多人点赞 2016-08-09 15:29:21
    网上看到其他人设计的立方体相册,自己也比着做了一个! 文本结构 second.html 旋转立方体相册

    网上看到其他人设计的立方体相册,自己也比着做了一个!


    文本结构



    second.html

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link type="text/css"  href="second.css" rel="stylesheet ">
        <title>旋转立方体相册</title>
    </head>
    <body>
    <div id="react">
        <div class="out_front">
            <img src="../images/a.jpg" class="out_pic">
        </div>
        <div class="out_back">
            <img src="../images/b.jpg" class="out_pic">
        </div>
        <div class="out_left">
            <img src="../images/c.jpg" class="out_pic">
        </div>
        <div class="out_right">
            <img src="../images/d.jpg" class="out_pic">
        </div>
        <div class="out_top">
            <img src="../images/e.jpg" class="out_pic">
        </div>
        <div class="out_bottom">
            <img src="../images/f.jpg" class="out_pic">
        </div>
        <span class="in_front">
            <img src="../images/g.jpg" class="in_pic">
        </span>
        <span class="in_back">
            <img src="../images/h.jpg" class="in_pic">
        </span>
        <span class="in_left">
            <img src="../images/i.jpg" class="in_pic">
        </span>
        <span class="in_right">
            <img src="../images/j.jpg" class="in_pic">
        </span>
        <span class="in_top">
            <img src="../images/k.jpg" class="in_pic">
        </span>
        <span class="in_bottom">
            <img src="../images/l.jpg" class="in_pic">
        </span>
    </div>
    </body>
    </html>


    second.css

    <pre name="code" class="css">*{
        padding:0;
        margin:0;
    }
    body{
        width:100%;
        height:100%;
        background:linear-gradient(darkred 0%,black 100%);
    }
    #react{
        width: 200px;
        height:200px;
        margin: 200px auto;
        transform-style:preserve-3d;
        animation:rotate 20s infinite;
        animation-timing-function: linear;
    }
    #react div{
        position:absolute;
        transition: all .4s;
    }
    div .out_pic{
        width:200px;
        height:200px;
        opacity:0.9;
    }
    div .in_pic{
        width:100px;
        height:100px;
    }
    #react span{
        display:block;
        position:absolute;
        width:100px;
        height:100px;
        top:50px;
        left:50px;
    }
    @keyframes rotate{
        from{transform: rotateX(0deg) rotateY(0deg);}
        to{transform: rotateX(360deg) rotateY(360deg);}
    }
    
    
    .out_front{
        transform:translateZ(100px);
    }
    .out_back{
        transform:translateZ(-100px);
    }
    .out_left{
        transform:rotateY(90deg) translateZ(100px);
    }
    .out_right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .out_top{
        transform:rotateX(90deg) translateZ(100px);
    }
    .out_bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
    .in_front{
        transform:translateZ(50px);
    }
    .in_back{
        transform:translateZ(-50px);
    }
    .in_left{
        transform:rotateY(90deg) translateZ(50px);
    }
    .in_right{
        transform: rotateY(-90deg) translateZ(50px);
    }
    .in_top{
        transform:rotateX(90deg) translateZ(50px);
    }
    .in_bottom{
        transform: rotateX(-90deg) translateZ(50px);
    }
    
    /*外面的图片散开*/
    #react:hover .out_front{
        transform:translateZ(200px);
    }
    #react:hover .out_back{
        transform:translateZ(-200px);
    }
    #react:hover .out_left{
        transform:rotateY(90deg) translateZ(200px);
    }
    #react:hover .out_right{
        transform: rotateY(-90deg) translateZ(200px);
    }
    #react:hover .out_top{
        transform:rotateX(90deg) translateZ(200px);
    }
    #react:hover .out_bottom{
        transform: rotateX(-90deg) translateZ(200px);
    }
    
    
    /*里面的图片散开*/
    #react:hover .in_front{
        transform:translateZ(100px);
    }
    #react:hover .in_back{
        transform:translateZ(-100px);
    }
    #react:hover .in_left{
        transform:rotateY(90deg) translateZ(100px);
    }
    #react:hover .in_right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    #react:hover .in_top{
        transform:rotateX(90deg) translateZ(100px);
    }
    #react:hover .in_bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
    
    @charset "utf-8";
    /* CSS Document */


    
    

    运行效果

    我是在UC浏览器里面运行的




    展开全文
  • 旋转立方体线框

    2020-12-14 11:13:30
    旋转立方体线框示例CSSJS 更多有趣示例 尽在知屋安砖社区 示例 CSS body { margin: 0; } canvas { width: 100%; height: 100% } JS var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75...

    旋转立方体线框


    更多有趣示例 尽在知屋安砖社区

    示例

    在这里插入图片描述

    CSS

    body { margin: 0; }
    canvas { width: 100%; height: 100% }
    

    JS

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.2, 1000 );
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    const geometry = new THREE.BoxGeometry(10, 10, 10, 10, 10, 10); 
    const material = new THREE.MeshNormalMaterial({ wireframe: true }); 
    const cube = new THREE.Mesh(geometry, material);
    scene.add( cube );
    
    camera.position.z = 20;
    
    var quaternion = new THREE.Quaternion();
      quaternion.setFromAxisAngle( new THREE.Vector3( 0,1,0 ), Math.PI / 180 );
    
    function animate() {
    	requestAnimationFrame( animate );
      cube.applyQuaternion(quaternion);
    	renderer.render( scene, camera );
    }
    animate();
    
    展开全文
  • opengl旋转立方体

    2009-12-09 22:06:52
    通过OpenGL实现一个旋转立方体。立方体的没个面都插有画面。
  • 彩色旋转立方体

    2020-11-03 13:30:45
    旋转立方体示例HTMLCSSJS 更多有趣示例 尽在小红砖社区 示例 HTML <!-- inspired by Cubed by John Flores on Dribble https://dribbble.com/shots/2272530-Cubed --> <canvas class="cnvs"></...

    旋转立方体


    更多有趣示例 尽在知屋安砖社区

    示例

    在这里插入图片描述

    HTML

    <!-- inspired by Cubed by John Flores on Dribble https://dribbble.com/shots/2272530-Cubed -->
    
    <canvas class="cnvs"></canvas>
    
    

    CSS

    body, html, canvas {
      width: 100%;
      height:100%;
    }
    
    

    JS

    let scene, camera, renderer, light, spotLight;
    let colors;
    
    let cube;
    let cuboids = [];
    
    let rotated = false;
    let back = false;
    
    const init = () => {
    
      colors = ["#FD6786", "#FDC632", "#FFFFF7", "#79F7F6", "#37B2FC", "#5A5262"];
    
      scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x969EA8 );
    
      camera = new THREE.PerspectiveCamera(
        75, window.innerWidth / window.innerHeight,
        0.1, 1000
      );
      camera.position.z = 2;
      scene.add( camera );
    
      //lights
      light = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
    	light.color.setHSL( 0.6, 1, 0.6 );
    	light.groundColor.setHSL( 0.095, 1, 0.75 );
    	light.position.set( -2, 5, 5 );
      scene.add( light );
    
      spotLight = new THREE.DirectionalLight(0xFFF8DC, 0.7);
      spotLight.color.setHSL( 0.1, 1, 0.95 );
      spotLight.position.set( -2, 0, 10 );
      spotLight.shadow.mapSize.width = 2048;
      spotLight.shadow.mapSize.height = 2048;
      spotLight.castShadow = true;
      spotLight.shadow.darkness = 1;
      scene.add( spotLight );
    
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: document.querySelector(`.cnvs`)
      });
    
      renderer.shadowMapSoft = true;
    
      renderer.setSize(
        window.innerWidth,
        window.innerHeight
      );
    
      //Cube-group
      cube = new THREE.Group();
      scene.add( cube );
    
      handleCube();
    
    }
    
    const handleCube = () => {
      let geometry = new THREE.BoxGeometry( 1, 0.15, 1 );
    
      for(let i = 0; i < colors.length; i++) {
    
        let material = new THREE.MeshLambertMaterial( { color: colors[i] } );
      	cuboids[i] = new THREE.Mesh( geometry, material );
        cuboids[i].position.y = (-i*0.15) + 0.38; // position in the middle
    
        cuboids[i].castShadow = true; //handling shadows
        cuboids[i].receiveShadow = true;
    
        cube.add(cuboids[i]);
    
      }
    
      requestAnimationFrame(render);
    
    }
    
    const rotateCuboids = () => {
    
      for(let i = 0; i < cuboids.length; i++) {
    
        if(cuboids[i].rotation.y > -1.55) {
    
          //starting rotating with the first cuboid
          if (i === 0) cuboids[i].rotation.y -= 0.05;
    
          //when the previous cuboid has a certain rotation, start the next one
          if(i !== 0 && cuboids[i-1].rotation.y < -0.3) cuboids[i].rotation.y -= 0.05;
    
        } else {
    
          if (cuboids[cuboids.length - 1].rotation.y < -1.55 ) rotated = true; //animation completed
    
        }
    
      }
    
    }
    
    const rotateCube = () => {
      if(rotated) {
    
        for(let i = 0; i < cuboids.length; i++) cuboids[i].rotation.y = 0;
    
        if(back) { // go back to original position, for nice loop
    
          if(cube.rotation.z < 0) { cube.rotation.z += 0.04; }
          else { rotated = false; back = !back; }
    
        } else {
    
          if(cube.rotation.z > -1.56) { cube.rotation.z -= 0.04; }
          else { rotated = false; back = !back;}
    
        }
    
      }
    
    }
    
    const render = () => {
    
      rotateCuboids();
      rotateCube();
      camera.lookAt(scene.position);
    
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    
    };
    
    init();
    
    
    展开全文
  • 这是一款使用纯CSS3制作的炫酷3D旋转立方体爆炸展开动画特效。在这个3D旋转立方体爆炸展开动画特效中,当鼠标滑过立方体时,立方体的六个面会在不停旋转的同时向外爆炸展开,效果非常酷。
  • 3D透明旋转立方体

    2019-02-18 11:30:55
    开发工具与关键技术:DW css3 作者:杨泽平 撰写时间:2019、2、15 3D透明旋转立方体是通过css3动画来完成的,大致是通过html跟css编写构成一个...代码完成,3D透明旋转立方体就完成了,下面就效果,截图如下: ...

空空如也

空空如也

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

旋转立方体