html与css实现3D效果的一些demo

最新推荐文章于 2024-07-15 16:36:52 发布

a little peanut

最新推荐文章于 2024-07-15 16:36:52 发布

阅读量3.5k

点赞数 9

分类专栏：前端

本文链接：https://blog.csdn.net/dayexiaofan/article/details/90516164

版权

前端专栏收录该内容

13 篇文章 11 订阅

订阅专栏

1、开门大吉

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section {
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            background: url(images/3.jpg) no-repeat;
            position: relative;
            perspective: 1000px;  /*给父盒子添加透视效果*/
        }
        .door-l, .door-r {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: pink;
            transition: all 1s; /*两个门都做过渡效果*/
            background: url(images/bg.png);


        }
        .door-l {
            left: 0;
            border-right: 1px solid #000;
            transform-origin: left;/* 左侧盒子按照左边翻转*/
        }
        .door-r {
            right: 0;
            left: 1px solid #000;
            transform-origin: right;/*  右侧盒子按照右边翻转*/
        }
        .door-l::before, .door-r::before {  /*伪元素 就是插入一个元素标签*/
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            border-radius: 50%; /*圆角*/
            transform：translateY(-50%); /*translate 如果是百分比， 就是走自己高度的一半*/
        }
        .door-l::before {
            right: 5px;
        }
        .door-r::before {
            left: 5px;
        }
        /*鼠标经过section 盒子 两个门盒子 翻转 rotateY*/
        section:hover .door-l {
            transform: rotateY(-130deg);  /*因为往左边翻转，所以是负值*/
        }
        section:hover .door-r {
            transform: rotateY(130deg);
        }
    </style>
</head>
<body>
<section>
    <div class="door-l"></div>
    <div class="door-r"></div>
</section>
</body>
</html>

在这里插入图片描述
2、两面翻转的图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;

        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;  /*不是正面对向屏幕，就隐藏*/
        }
        div:hover img {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div>
    <img src="../images/qian.svg" alt="loading"/>
    <img src="../images/hou.svg" alt="loading"/>
</div>
</body>
</html>

在这里插入图片描述

3、旋转

<!DOCTYPE html>
<html>
<head lang="en">
    <meta c![在这里插入图片描述](https://img-blog.csdnimg.cn/20190524144135596.gif)harset="UTF-8">
    <title></title>
    <style>
        body {
            perspective: 500px;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #ff3040;
            transition: all 1s;
            margin: 200px auto;
            transform-origin: 50px 50px;//允许更改转换元素的位置
            /* backface-visibility: hidden; //如果是背面就隐藏掉 */
        }

        div:hover {
            /* width: 500px;*/
            background-color: yellow;
            /*  height: 50px;*/
            /*transform: translate(300px);代表X轴*/
            /*transform: translate(300px,500px); 代表X轴,代表Y轴*/
            /*transform: translate(50%,50%); 相对于自身百分比*/
            /*transform: scale(0.9);  大于等于1.01放大 等于1不变  小于等于0.99缩小*/
            /*transform: rotate(60deg); 正值的时候顺时针 负值的时候逆时针*/
            /*transform: rotate(130deg); 正值的时候顺时针 负值的时候逆时针*/
            /*transform: skew(0deg,30deg); 正值的时候负方向斜切  负值的时候正方向斜切*/
            /*transform: rotateX(-60deg);*/
            /*transform: rotateY(60deg);*/
            /*transform: rotateZ(-60deg);*/
            /*transform: translate3d(0, 0,300px);*/
            transform: rotateY(180deg);//rotataY表示绕Y轴旋转180度

        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

4、3D旋转导航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3d导航</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      /*取消ul的默认样式*/
      list-style: none;
      margin: 100px auto;
      width: 800px;
    }
    ul li {
      width: 120px;
      height: 50px;
      float: left;
      position: relative;
      /*设置子元素显示方式为3d*/
      transform-style:preserve-3d; 
      /*设置旋转的过渡效果*/
      transition: transform 1s;     
    }
    li a {
      position: absolute;
      /*设置了相对定位的元素，默认具有块元素的特点*/
      /*取消a链接的默认下划线*/
      text-decoration: none;
      text-align: center; 
      line-height: 50px;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    li a:first-child {
      transform: translateZ(25px);
      background-color: #ff5544;
    }
    li a:last-child {
      background-color: skyblue;
      transform: rotateX(-90deg) translateZ( 25px );
    }
    li:hover {
      transform: rotateX(90deg);
    }
  </style>
</head>
<body>
  <ul>
    <li>
     <a href="#">我是程序员</a>
     <a href="#">前端工程师</a>
    </li>
    <li>
     <a href="#">我是程序员</a>
     <a href="#">前端工程师</a>
    </li><li>
     <a href="#">我是程序员</a>
     <a href="#">前端工程师</a>
    </li><li>
     <a href="#">我是程序员</a>
     <a href="#">前端工程师</a>
    </li><li>
     <a href="#">我是程序员</a>
     <a href="#">前端工程师</a>
    </li>
  </ul>
</body>
</html>

在这里插入图片描述