旋转正方体加径向渐变

<html>
<head>
    <title>H5立方</title>
    <meta charset="utf-8">
    <style>
        html{
            height: 100%;
            /*径向渐变*/
            background: radial-gradient(circle, #333, #000, #000);
        }
        body{
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
            当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
            注释：perspective 属性只影响 3D 转换元素。
            1000px 为界限
            */
            perspective: 1500px;
        }
        main
        {
            width: 300px;
            height: 300px;
            /*使被转换的子元素保留其 3D 转换：*/
            transform-style: preserve-3d;
            animation: 10s spin linear infinite;
        }
        main div
        {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100%;
            border: 1px solid black;
        }
        .font
        {
            background-image: url(/demos/img/pic1.jpg);
            /*translateZ表示元素在Z轴上进行平移*/
            transform: translateZ(150px);
        }
        .back
        {
            background-image: url(/demos/img/pic2.jpg);
            transform: translateZ(-150px);
        }

.left
        {
            background-image: url(/demos/img/pic3.jpg);
            /*rotate表示旋转，rotateY表示绕着Y轴旋转度数，*/
            transform: rotateY(90deg) translateZ(-150px);
        }
        .right
        {
            background-image: url(/demos/img/pic4.jpg);
            transform: rotateY(90deg) translateZ(150px);
        }

.top
        {
            background-image: url(/demos/img/pic5.jpg);
            transform: rotateX(90deg) translateZ(-150px);
        }
        .bottom
        {
            background-image: url(/demos/img/pic6.jpg);
            transform: rotateX(90deg) translateZ(150px);
        }

@keyframes spin
        {
            0%
            {
                transform: rotateX(0) rotateY(0);
            }
            100%
            {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<main>
    <div class="font"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</main>
</body>
</html>

旋转正方体加径向渐变相关推荐

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
径向渐变加阴影html,CSS径向渐变阴影 - 反转
从绘制椭圆阴影的Wordpress模板中获取一些预先存在的代码.阴影以椭圆形向下辐射.只有椭圆的下半部分可见,从而产生底部阴影效果.CSS径向渐变阴影 - 反转我只是想"反转"椭 ...
css旋转45度_css 渐变过渡2D
一.过渡属性 transition css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标划过.单击.获得焦点或对元素任何改变中触发,并圆滑地以动画效果改变C ...
渐变：线性渐变、径向渐变
渐变: CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 分为线性渐变(linear-gradient).径向渐变(radial-gradient) 线性渐变(l ...
unity天空盒渐变_CodeGo.netgt;如何使Unity中的径向渐变天空盒？
好的,我是空盒的新手,在尝试实现RADIAL渐变空盒时遇到一些问题.我有一个径向渐变着色器,但是当我将其作为天空盒放置时,在两种颜色之间插值的部分过于放大,这意味着您根本无法真正分辨出其渐变. 我认为 ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
CSS3线性渐变与径向渐变
目标:使用background-image属性实现渐变背景效果 CSS 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1.CSS 线性渐变如需创建线性渐 ...

旋转正方体加径向渐变

旋转正方体加径向渐变相关推荐

最新文章

热门文章