css实现3D立体

最新推荐文章于 2022-04-11 18:50:12 发布

cold-coffee

最新推荐文章于 2022-04-11 18:50:12 发布

阅读量1.6k

点赞数 1

分类专栏：前端随笔

原文链接：https://www.cnblogs.com/zheshiyigemanong/p/6793634.html

版权

前端随笔专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /* width: 160px;
            height: 300px;
            margin: 0 auto;
            修改基本样式 */
        }
        .div1{
            margin:  0 auto;
            width: 160px;
            height: 300px;
            margin-top: 100px;
            transform: perspective(400px) rotatex(105deg) rotatey(45deg);
            /*拥有近大远小透视效果*/
            transform-style: preserve-3d;
            /*设置为3d空间*/
            position: relative;
            border:1px solid #000000;
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
            /*旋转动画*/
        }
        .div1 div{
            position: absolute;
            font-size: 80px;
            line-height: 300px;
            text-align: center;
            top: 0;
            left: 0;
            /*内部样式*/
        }
        .div1_1{
            width: 160px;
            transform: translatez(65px);
            background-color: red;
            /*向前移动100像素，作为最前面的面*/
        }
        .div1_2{
            transform: rotatex(90deg) translatez(100px);
            background-color:green;
            /*绕x轴旋转90度，在z轴正方向移动100像素，作为上面的面*/
            /*注：旋转时坐标系会跟着一起旋转，z轴原来是垂直屏幕向外的，绕x轴旋转90度以后就是在屏幕上向上的方向*/
        }
        .div1_3{
            width: 160px;
            transform: rotatex(180deg) translatez(65px);
            background-color: blue;
            /*绕x轴旋转180度，这时z轴垂直屏幕向内，在z轴正方向移动100像素，作为后面的面*/
        }
        .div1_4{
            transform: rotatex(270deg) translatez(100px);
            background-color: purple;
            /*绕x轴旋转270度，这时z轴向下，在z轴正方向移动100像素，作为下面的面*/
        }
        .div1_5{
            width: 130px;
            transform: rotatey(90deg) translatez(100px);
            background-color: pink;
            /*绕y轴旋转90度，这时z轴向右，在z轴正方向移动100像素，作为右面的面*/
        }
        .div1_6{
            width: 130px;
            transform: rotatey(270deg) translatez(65px);
            background-color: yellow;
            /*绕y轴旋转90度，这时z轴向左，在z轴正方向移动100像素，作为左面的面*/
        }
        /* @-webkit-keyframes xuanzhuan{
            0% {transform:perspective(400px) rotateY(0deg)}
            25% {transform:perspective(400px) rotateY(45deg)}
            50% {transform:perspective(400px) rotateY(90deg)}
            75% {transform:perspective(400px) rotateY(135deg)}
            100% {transform:perspective(400px) rotateY(180deg)}
           
        } */
        /* .div1:hover{
            transform: perspective(400px) scale(1.5);
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
        } */

    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
    <!-- <div class="div1_2">2</div> -->
    <div class="div1_3">3</div>
    <!-- <div class="div1_4">4</div> -->
    <div class="div1_5">5</div>
    <div class="div1_6">6</div>
</div>
<!--html标签布局-->
</body>
</html>

cold-coffee

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现3D立体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ /* width: 160px; ...
复制链接

扫一扫