css实现2D/3D效果

H_HX126

已于 2023-03-01 19:28:40 修改

阅读量361

点赞数 1

文章标签： html 前端 css Powered by 金山文档

于 2023-03-01 19:26:13 首次发布

本文链接：https://blog.csdn.net/weixin_46058007/article/details/129287779

版权

以下所有案例中使用的图片地址均为我的本地图片，使用时需要将代码中img标签中src属性的图片地址修改为自己的地址或者搜出来的线上地址，否则案例中的图片无法加载。

旋转便签

代码展示

hover和transform实现旋转便签的展开效果，很好看的。

<!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>旋转便签</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            width: 1500px;
            height: 780px;
            
        }
        /* 彩色便签 */
        .left {
            float: left;
            width: 500px;
            height: 780px;
            background-color: pink;
            margin-left: 20px;
            padding-left: 50px;
            padding-top: 300px;
            position: relative;
            border: 1px double rgb(203, 79, 172);
            box-sizing: border-box;
        }
        .demo {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(79, 75, 75);
            position: absolute;
            transition: all 1s;
            transform-origin: top right;
        }
        .demo:nth-of-type(1) {
            background-color: rgb(238, 67, 104);
        }
        .left:hover .demo:nth-of-type(1) {
            transform: rotate(60deg);
        }
        .demo:nth-of-type(2) {
            background-color: orange;
        }
        .left:hover .demo:nth-of-type(2) {
            transform: rotate(120deg);
        }
        .demo:nth-of-type(3) {
            background-color: yellow;
        }
        .left:hover .demo:nth-of-type(3) {
            transform: rotate(180deg);
        }
        .demo:nth-of-type(4) {
            background-color: rgb(70, 238, 67);
        }
        .left:hover .demo:nth-of-type(4) {
            transform: rotate(240deg);
        }
        .demo:nth-of-type(5) {
            background-color: rgb(67, 215, 238);
        }
        .left:hover .demo:nth-of-type(5) {
            transform: rotate(300deg);
        }
        .demo:nth-of-type(6) {
            background-color: rgb(209, 51, 175);
        }
        .left:hover .demo:nth-of-type(6) {
            transform: rotate(360deg);
        }

        /* 图片展开 */
        .right {
            float: right;
            width: 900px;
            height: 780px;
            background-color: pink;
            border: 1px double rgb(203, 79, 172);
            padding-top: 350px;
            padding-left: 200px;
            position: relative;
            box-sizing: border-box;
        }
        img {
            width: 300px;
            height: 168px;
            position: absolute;
            transition: 2s;
            transform-origin: top right;
        }
        .right:hover img:nth-of-type(1) {
            transform: rotate(60deg);
        }
        .right:hover img:nth-of-type(2) {
            transform: rotate(120deg);
        }
        .right:hover img:nth-of-type(3) {
            transform: rotate(180deg);
        }
        .right:hover img:nth-of-type(4) {
            transform: rotate(240deg);
        }
        .right:hover img:nth-of-type(5) {
            transform: rotate(300deg);
        }
        .right:hover img:nth-of-type(6) {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <div class="demo"></div>
            <div class="demo"></div>
            <div class="demo"></div>
            <div class="demo"></div>
            <div class="demo"></div>
            <div class="demo"></div>
        </div>
        <div class="right">
            <img src="./img/ly16.webp" alt="">
            <img src="./img/ly10.webp" alt="">
            <img src="./img/ly19.webp" alt="">
            <img src="./img/ly11.webp" alt="">
            <img src="./img/ly15.webp" alt="">
            <img src="./img/ly18.webp" alt="">
        </div>
    </div>
</body>
</html>

运行效果（展开过程中的截图）

右边使用的图片需要自行更换，因为我使用的是本地的图片。

人物介绍卡片

代码展示

<!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>人物介绍</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            width: 1200px;
            height: 800px;
            margin: auto;
        }
        .people {
            float: left;
            width: 300px;
            height: 300px;
            background-color: #333333;
            margin-right: 100px;
            margin-top: 60px;
            position: relative;

            transition: 1s;
            transform-style: preserve-3d;   
        }
        img {
            width: inherit;
            height: inherit;
            backface-visibility: hidden;
        }
        .text {
            padding: 20px;
            width: 300px;
            height: 180px;
            margin-top: 60px;
            box-sizing: border-box;
            position: absolute;
            top: 0px;
            left: 0px;
            background-image: linear-gradient(to right bottom, #931bd4, #2866f7, #008bfd, #00a5ee, #00b9d9, #00badc, #00bbe0, #00bce3, #00a9f5, #6e8df4, #b265d4, #dc2998);
           
            transform: rotateY(180deg) translateZ(60px);
        }
        .people:hover {
            transform : rotateY(180deg);
        }
        .people:hover .text {
            left: -40px;
            width: 380px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="people">
            <img src="./img/bl02.png" alt="">
            <div class="text">
                <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;白鹿</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;原名白梦妍，1994年9月23日出生于江苏省常州市，中国内地女演员、模特。代表作品有《一生一世》、《周生如故》、《警察荣誉》、《玉楼春》、《半是蜜糖半是伤》、《招摇》、《烈火军校》等。</p>
            </div>
        </div>
        <div class="people">
            <img src="./img/ly6.webp" alt="">
            <div class="text">
                <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赵丽颖</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。代表作品有《幸福到万家》、《谁是凶手》、《有匪》、《知否知否应是绿肥红瘦》、《花千骨》、《楚乔传》、《陆贞传奇》等。</p>
            </div>
        </div>
        <div class="people">
            <img src="./img/zjm02.webp" alt="">
            <div class="text">
                <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赵今麦</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赵今麦，2002年9月29日出生于辽宁省沈阳市，中国内地女演员，就读于中央戏剧学院。代表作品有《开端》、《爱的理想生活》、《少年派》、《一周的朋友》、《玲珑》、《初恋那件小事》、《快把我哥带走》等。</p>
            </div>
        </div>
    </div>
</body>
</html>

运行效果

正面为人物的照片，鼠标hover之后旋转到反面，反面为人物介绍。

照片旋转正方体

代码展示

<!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>旋转正方体</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            width: 600px;
            height: 600px;
            padding-top: 200px;
            margin: auto;
        }
        /* 动画 */
        @keyframes xuanzhuan {
            0% {
                transform: rotateX(10deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(10deg) rotateY(360deg);
            }
        }
        /* 小盒子 */
        .min {
            width: 100px;
            height: 100px;
            margin: auto;
            position: relative;
            top: 100px;

            animation: xuanzhuan 5s infinite linear;
            transform-origin: 50px 50px;

            transition: 5s;
            transform-style: preserve-3d;

        }
        .min img {
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .min>img:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(50px);
        }
        .min>img:nth-of-type(2) {
            transform: rotateY(90deg) translateZ(50px);
        }
        .min>img:nth-of-type(3) {
            transform: rotateY(180deg) translateZ(50px);
        }
        .min>img:nth-of-type(4) {
            transform: rotateY(270deg) translateZ(50px);
        }
        .min>img:nth-of-type(5) {
            transform: rotateX(90deg) translateZ(50px);
        }
        .min>img:nth-of-type(6) {
            transform: rotateX(270deg) translateZ(50px);
        }
        /* 大盒子 */
        .max {
            width: 200px;
            height: 200px;
            margin: auto;
            top: -50px;
            position: relative;

            /* 动画 */
            animation: xuanzhuan 5s infinite linear;
            transform-origin: 100px 100px;

            transform-style: preserve-3d;
            transform: rotateX(10deg) rotateY(45deg);
            transition: 5s;
        }
        .max img {
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0.2;
        }
        .max>img:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(100px);
            transition: 1s;
        }
        .max>img:nth-of-type(2) {
            transform: rotateY(90deg) translateZ(100px);
            transition: 1s;
        }
        .max>img:nth-of-type(3) {
            transform: rotateY(180deg) translateZ(100px);
            transition: 1s;
        }
        .max>img:nth-of-type(4) {
            transform: rotateY(270deg) translateZ(100px);
            transition: 1s;
        }
        .max>img:nth-of-type(5) {
            transform: rotateX(90deg) translateZ(100px);
            transition: 1s;
        }
        .max>img:nth-of-type(6) {
            transform: rotateX(270deg) translateZ(100px);
            transition: 1s;
        }
        /* 鼠标悬浮之后大盒子的图片改变 */
        .max:hover>img:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(200px);
            opacity: 0.8;
        }
        .max:hover>img:nth-of-type(2) {
            transform: rotateY(90deg) translateZ(200px);
            opacity: 0.8;
        }
        .max:hover>img:nth-of-type(3) {
            transform: rotateY(180deg) translateZ(200px);
            opacity: 0.8;
        }
        .max:hover>img:nth-of-type(4) {
            transform: rotateY(270deg) translateZ(200px);
            opacity: 0.8;
        }
        .max:hover>img:nth-of-type(5) {
            transform: rotateX(90deg) translateZ(200px);
            opacity: 0.8;
        }
        .max:hover>img:nth-of-type(6) {
            transform: rotateX(270deg) translateZ(200px);
            opacity: 0.8;
        }
        /* 鼠标悬浮之后让大盒子的图片放大为原来的2倍 */
        .box:hover .max{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="min">
            <img src="./img/ly5.webp" alt="">
            <img src="./img/ly6.webp" alt="">
            <img src="./img/ly8.webp" alt="">
            <img src="./img/ly7.webp" alt="">
            <img src="./img/bl02.png" alt="">
            <img src="./img/zjm02.webp" alt="">
        </div>
        <div class="max">
            <img src="./img/zjm01.webp" alt="">
            <img src="./img/zjm03.png" alt="">
            <img src="./img/ly4.webp" alt="">
            <img src="./img/bl02.png" alt="">
            <img src="./img/ly9.webp" alt="">
            <img src="./img/ly1.webp" alt="">
        </div>
    </div>
</body>
</html>