CSS实现炫酷3D旋转立体动画例子

image
image
image

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炫酷3D旋转立体动画</title>
  <!-- <link ref="stylesheet" href="index.css"> -->
<style>
   *{
  margin: 0;
  padding: 0;
  }

  li{
    list-style: none;
  }

  html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .main{
    width: 100%;
    height: 100%;
    perspective: 800;/*视距大小 */
  }
  .bg{
    width: 100%;
    height: 100%;
    object-fit: fill; /* 让图片充满整个背景 */
  }
  .cubeBox{
    width: 200px;
    height: 200px;
    position:absolute;
    top:50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    transform-style: preserve-3d;/* 变化类型为3D */
  }
  .cube{
    width: 100px;
    height: 100px;
    position: absolute;
    top:50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    transform-style: preserve-3d;
    transform:rotateX(-10deg) rotateY(45deg);/*整个立方体角度的旋转 */
    animation: move 4s linear infinite;  /* move动画名称 4s时间 linear线性曲线 infinite无线循环播放 */
  }
  .cube li{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 1s ease; /* 书标配移动时的过度效果，过度时间为1s,ease为匀速过度 */
  }
  /* 控制播放器 */
  .cube li video{
    width: 100%;
    height: 100%;
  }
  /* 控制每一个面角度的变化 */
  .cube li:nth-child(1){
    transform:rotateX(0deg) translateZ(50px); /* translate(50px)为变化的Z轴 */
  }
  .cube li:nth-child(2){
    transform:rotateX(180deg) translateZ(50px); /* translate(50px)为变化的Z轴 */
  }
  .cube li:nth-child(3){
    transform:rotateX(-90deg) translateZ(50px); /* translate(50px)为变化的Z轴 */
  }
  .cube li:nth-child(4){
    transform:rotateX(90deg) translateZ(50px); /* translate(50px)为变化的Z轴 */
  }
  .cube li:nth-child(5){
    transform:rotateY(-90deg) translateZ(50px);/* translate(50px)为变化的Z轴 */
  }
  .cube li:nth-child(6){
    transform:rotateY(90deg) translateZ(50px); /* translate(50px)为变化的Z轴 */
  }

  .bigCube{
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
  }
  .bigCube li:nth-child(1){
    transform:rotateX(0deg) translateZ(100px); /* translate(50px)为变化的Z轴 */
  }
  .bigCube li:nth-child(2){
    transform:rotateX(180deg) translateZ(100px); /* translate(50px)为变化的Z轴 */
  }
  .bigCube li:nth-child(3){
    transform:rotateX(-90deg) translateZ(100px); /* translate(50px)为变化的Z轴 */
  }
  .bigCube li:nth-child(4){
    transform:rotateX(90deg) translateZ(100px); /* translate(50px)为变化的Z轴 */
  }
  .bigCube li:nth-child(5){
    transform:rotateY(-90deg) translateZ(100px); /* translate(50px)为变化的Z轴 */
  }
  .bigCube li:nth-child(6){
    transform:rotateY(90deg) translateZ(100px); /* translate(50px)为变化的Z轴 */
  }

  @keyframes move{
    0%{
      transform:rotateX(-13deg) rotateY(0deg);
    }
    0%{
      transform:rotateX(-13deg) rotateY(360deg);
    }
  }

  /* 大立方体上添加鼠标移上的效果 */
  .cubeBox:hover .bigCube li:nth-child(1){
    transform:rotateX(0deg) translateZ(200px); /* translate(50px)为变化的Z轴 */
  }
  .cubeBox:hover .bigCube li:nth-child(2){
    transform:rotateX(180deg) translateZ(200px); /* translate(50px)为变化的Z轴 */
  }
  .cubeBox:hover .bigCube li:nth-child(3){
    transform:rotateX(-90deg) translateZ(200px); /* translate(50px)为变化的Z轴 */
  }
  .cubeBox:hover .bigCube li:nth-child(4){
    transform:rotateX(90deg) translateZ(200px); /* translate(50px)为变化的Z轴 */
  }
  .cubeBox:hover .bigCube li:nth-child(5){
    transform:rotateY(-90deg) translateZ(200px); /* translate(50px)为变化的Z轴 */
  }
  .cubeBox:hover .bigCube li:nth-child(6){
    transform:rotateY(90deg) translateZ(200px); /* translate(50px)为变化的Z轴 */
  }
</style>
</head>
<body>
   <div class="main"><!--父容器 -->
      <!-- 背景播放器 -->
      <video src="vedio.mp4" autoplay="true" loop="1" muted class="bg"></video> <!-- autoplay自动播放 loop循环播放 muted静音 -->
      <div class="cubeBox">
        <!-- 小立方体容器 -->
        <ul class="cube">
          <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
          <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
          <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
          <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
          <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
          <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
        </ul>

          <!-- 大立方体容器 -->
          <ul class="cube bigCube">
            <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
            <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
            <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
            <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
            <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
            <li><video src="vedio.mp4" autoplay="true" loop="1" muted></video></li>
        </ul>
      </div>
  </div>
</body>
</html>
posted @ 2022-09-05 22:44  huangchun0121  阅读(234)  评论(0)    收藏  举报