css简单样式（旋转正方形、纸片旋转、轮播图3D、简单轮播图）

最新推荐文章于 2024-10-12 19:51:27 发布

软件测试进阶中

最新推荐文章于 2024-10-12 19:51:27 发布

阅读量2.5k

点赞数

文章标签： css效果旋转正方形轮播纸片旋转轮播3D

本文链接：https://blog.csdn.net/hard_days/article/details/82862608

版权

旋转正方形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>旋转立方体</title>
  <style type="text/css">
    .stage{
      position: relative;
      perspective: 800px;
    }  
    @keyframes rotate-frame{   /* 设置动画效果 */
      0% {
          transform: rotateX(0deg) rotateY(0deg);
      }
      
      50% {
          transform: rotateX(360deg) rotateY(0deg);
      } 
      100% {
          transform: rotateX(360deg) rotateY(360deg);
      }
    }
    .container{
      width: 450px;
      height: 450px;
      margin: 0 auto;
      transform-style:preserve-3d;
      animation: rotate-frame 8s infinite linear;
      animation-timing-function: all;
      animation-direction: normal;
  
      animation-fill-mode: backwards;

      transform-origin: 50% 50% 75px;

      /*background: yellow;   容器屏幕背景色*/
    }
    .container:hover{
      /*覆盖时暂停动画*/
      animation-play-state: paused;
    }
    .side{
      width: 150px;
      height: 150px;
      position: absolute;
      text-align: center;
      line-height: 150px;
      font-size: 50px;
    }
    .top{
      left: 150px;
      top: 0;
      transform: rotateX(-90deg);   /* 设置角度 */
      transform-origin: bottom;
      background-color: rgba(0,0,255,0.5);
    }
    .bottom{
      left: 150px;
      top: 300px;
      transform: rotateX(90deg);
      transform-origin: top;
      background-color: rgba(0,255,0,0.5);
    }
    .left{
      left: 0;
      top: 150px;
      transform: rotateY(90deg);