CSS3-2D和3D的使用

2201_75449897

已于 2024-07-20 13:37:28 修改

阅读量188

点赞数 2

文章标签： css3 3d css

于 2024-06-25 21:20:59 首次发布

本文链接：https://blog.csdn.net/2201_75449897/article/details/139969765

版权

2d效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ff1212;
            transition: all 2s;
            /* 过渡效果 就是在元素改变的时候添加中间的动画 */
            /* transform: translate(0, 0); */
            /* 让元素平移 */
            margin: 200px auto;
        }
        
        .box:hover {
            /* background-color: #2609ff; */
            /* transform: translate(100px, 200px); */
            /* transform: scale(1.5, 1.5); */
            /* 缩放 */
            /* transform: rotate(18000000deg); */
            transform: skew(50deg, 0deg) rotate(18000000deg) scale(1.5, 1.5) translate(100px, 200px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

3d效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 80px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: #ff1212;
            transition: all 5s;
            /* 过渡效果 就是在元素改变的时候添加中间的动画 */
            margin: 200px auto;
        }
        
        .box:hover {
            transform: rotateX(180deg);
            /* transform: rotateY(180deg); */
            /* transform: rotateZ(180deg); */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

过度效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ff1212;
            transition: all 3s;
            /* 过渡效果 就是在元素改变的时候添加中间的动画 */
            transform: translate(0, 0);
            /* 让元素平移 */
        }
        
        .box:hover {
            background-color: #2609ff;
            transform: translate(100px, 200px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

开门效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            transition: all 3s;
            perspective: 500px;
            background-image: url(./images/R-C.jfif);
            background-repeat: no-repeat;
            background-size: contain;
        }
        
        .left {
            width: 250px;
            height: 500px;
            background-color: #ff2424;
            float: left;
            transition: all 3s;
            transform-origin: left top;
            background-image: url(./images/R-C.png);
            background-repeat: no-repeat;
            background-position: -186px -58px;
        }
        
        .right {
            width: 250px;
            height: 500px;
            background-color: #91ff24;
            float: left;
            transition: all 3s;
            transform-origin: right top;
            background-image: url(./images/R-C.png);
            background-repeat: no-repeat;
            background-position: -446px -58px;
        }
        
        .box:hover .left {
            transform: rotateY(90deg);
            box-shadow: 0px 5px 100px rgb(146, 146, 146);
        }
        
        .box:hover .right {
            transform: rotateY(-90deg);
            box-shadow: 0px 5px 100px rgb(146, 146, 146);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

小米商城效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 220px;
            height: 220px;
            background-image: url(./images/pms_1550642182.7527088!220x220.jpg);
            margin: 200px auto;
            border: 1px solid red;
            transition: all 1s;
        }
        
        .box:hover {
            transform: translate(0, -15px);
            box-shadow: 0px 3px 10px 1px rgb(146, 146, 146);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

正方体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 200px auto;
            perspective: 1000px;
            /* transition: all 100s; */
            position: relative;
            transform-style: preserve-3d;
            /* animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向; */
            animation: zhuan 20s ease 0s 1;
        }
        
        @keyframes zhuan {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            20% {
                transform: rotateX(50deg) rotateY(0deg) rotateZ(0deg);
            }
            40% {
                transform: rotateX(180deg) rotateY(70deg) rotateZ(0deg);
            }
            60% {
                transform: rotateX(250deg) rotateY(180deg) rotateZ(50deg);
            }
            80% {
                transform: rotateX(360deg) rotateY(270deg) rotateZ(100deg);
            }
            100% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
        }
        /* .box:hover {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        } */
        
        .box1 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 200px;
        }
        
        .qian {
            background-color: #f92727;
            transform: translateZ(100px);
        }
        
        .hou {
            background-color: #ffdf11;
            transform: translateZ(-100px);
        }
        
        .zuo {
            background-color: #37f31a;
            transform: rotateY(90deg) translateZ(-100px);
        }
        
        .you {
            background-color: #24deff;
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .shang {
            background-color: #8a16ff;
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .xia {
            background-color: orange;
            transform: rotateX(90deg) translateZ(-100px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="qian box1">李亮</div>
        <div class="hou box1">小阿麦</div>
        <div class="shang box1">石家先</div>
        <div class="xia box1">小康总</div>
        <div class="zuo box1">金一鑫</div>
        <div class="you box1">庆哥</div>
    </div>
</body>

</html>