CSS3-纹理背景及3D图制作

最新推荐文章于 2022-03-06 11:33:57 发布

qq_35089721

最新推荐文章于 2022-03-06 11:33:57 发布

阅读量893

点赞数

分类专栏：技巧 CSS3 文章标签： CSS3

本文链接：https://blog.csdn.net/qq_35089721/article/details/83024446

版权

技巧同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

CSS3

3 篇文章 0 订阅

订阅专栏

界面显示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-纹理背景及3D图制作</title>
    <style>
        body{
            background-color: #ddeeff;
            /*CSS3制作纹理背景*/
            background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
            background-position: 0 0, 40px 40px;
            background-size: 80px 80px;
        }
        .wrapper{
            width: 50%;
            float: left;
        }
        .cube{
            font-size: 4em;
            width: 2em;
            margin: 1.5em auto;
            /*css3 3D图*/
            transform-style: preserve-3d;
            transform: rotateX(-40deg) rotateY(32deg);
        }
        .side{
            position: absolute;
            width: 2em;
            height: 2em;
            background: rgba(255,99,71,0.6);
            border: 1px solid rgba(0,0,0,0.5);
            color: #fff;
            text-align: center;
            line-height: 2em;
        }
        .front{
            transform: translateZ(1em);
        }
        .bottom{
            transform: rotateX(-90deg) translateZ(1em);
        }
        .left{
            transform: rotatey(-90deg) translateZ(1em);
        }
        .right{
            transform: rotateY(90deg) translateZ(1em);
        }
        .top{
            transform: rotateX(90deg) translateZ(1em);
        }
        .back{
            transform:rotateY(-180deg) translateZ(1em);
        }
        .w2{
            perspective: 1000px;
        }
        .w1{
            perspective: 100px;
        }
    </style>
</head>
<body>
<div class="wrapper w2">
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>
<div class="wrapper w1">
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>
</body>
</html>

qq_35089721

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3-纹理背景及3D图制作

界面显示：代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3-纹理背景及3D图制作&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫