html 运行css实现3D正方体旋转制作

正方体旋转制作
1.animation 与 keyframes配合使用
keyframes可以控制动画序列的中间步骤。from to 的变化使用,相当于 0%/from 和100%/to,从什么变化到什么,加入中间的的过程的话可以设置 0% 25% 100% 等等。

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

动画加入多个中间的过程,先怎么样再怎么样最后怎么样。

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

position
relative 相对位置 :元素先放置在未添加定位时的位置
absolute 绝对位置 :并不为元素预留空间
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

top left 进行移动,transform进行返回原来的的位置

 top: 50%;left: 50%;
 transform: translate(-50%, -50%);

infinite 无限多次循环

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>titletitle>
	<style>
	/* chrome从哪里旋转到哪里*/
    @-webkit-keyframes spin {
		  from { transform: rotateY(0); }
		  to   { transform: rotateY(360deg); }
		}

		/* scene wrapper   margin-top  */
		.wrapper{
		  height: 200px;
		  margin-top:15%;
		  position:relative;
		  perspective: 800;
		  perspective-origin: 50% 100px;
		}

		/* cube wrapper */
		.cube{
		  position: relative;
		  margin: 0 auto;
		  width: 200px;
		  transform-style: preserve-3d;
		  /* 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。 */
		  animation: spin 10s infinite linear;
		  transition: all 1s linear;
		}

		/* outer cube */
		b{
		  position:absolute;
		  width:200px;
		  height:200px;
		  display:block;
		  background:rgba(51,182,255,0.1);
		  box-shadow:inset 0 0 30px rgba(51,182,255,0.3);
		  font-size:20px;
		  text-align:center;
		  line-height:66px;
		  color:rgba(0,0,0,0.7);
		  font-family:sans-serif;
		  text-transform:uppercase;
		  transition: all 1s linear;
		}
		b.back{
		  transform: translateZ(-100px) rotateY(180deg);
		}
		b.right{
		  transform:rotateY(-270deg) translateX(100px);
		  transform-origin: top right;
		}
		b.left{
		  transform:rotateY(270deg) translateX(-100px);
		  transform-origin: center left;
		}
		b.top{
		  transform:rotateX(-90deg) translateY(-100px);
		  transform-origin: top center;
		}
		b.bottom{
		  transform:rotateX(90deg) translateY(100px);
		  transform-origin: bottom center;
		}
		b.front{
		  transform: translateZ(100px);
		}

		/* inner cube */
		i{
		  position:absolute;
		  top:25px;
		  left:25px;
		  width:150px;
		  height:150px;
		  display:block;
		  background:url({% static 'cb/images/yhb.jpg' %} ) no-repeat;
		  background-position:center center;
		  background-size: 150px 150px;
            opacity:0.8;
		  transition: all 1s linear;

		}
		i.front{
		  transform: translateZ(75px);
		}
		i.back{
		  transform: translateZ(-75px) rotateY(180deg);
		}
		i.bottom{
		  transform:rotateX(-90deg) translateY(75px);
		  transform-origin: left bottom;
		}
		i.left{
		  transform:rotateY(270deg) translateX(-75px);
		  transform-origin: center left;
		}
		i.right{
		  transform:rotateY(-270deg) translateX(75px);
		  transform-origin: top right;
		}
		i.top{
		  transform:rotateX(-270deg) translateY(-75px);
		  transform-origin: left top;
		}

		/* hover transformations */
		.cube:hover{
		  top:150px;
		}
		.cube:hover b.top{
		  transform: translateZ(100px) rotateX(-210deg);
		  transform-origin: top center;
          transition: all 1ms;

		}
		.cube:hover i{
		  top:-200px;
            opacity:1;
		}

        .cube:hover b.front {
                background:rgba(51,182,255,0.7);

            }
        .cube:hover b.back {
                background:rgba(51,182,255,0.7);

            }
        .cube:hover b.right {
            background:rgba(51,182,255,0.7);
            }
        .cube:hover b.left {
            background:rgba(51,182,255,0.7);
            }
	style>
head>
<body>
	
	<div class="wrapper">
	  <div class="cube">
	    <b class="front">frontb>
	    <b class="back">backb>
	    <b class="top">topb>
	    <b class="bottom">bottomb>
	    <b class="left">leftb>
	    <b class="right">rightb>
	    <i class="front">i>
	    <i class="back">i>
	    <i class="top">i>
	    <i class="bottom">i>
	    <i class="left">i>
	    <i class="right">i>
	  div>
	div>

body>
html>

css目前建议最好的学习方式是参考
https://developer.mozilla.org
非常推荐很好支持中文的阅读

你可能感兴趣的:(html,css3,css,html)