CSS3 3D旋转魔方

最新推荐文章于 2021-09-23 14:58:12 发布

俊刚、

最新推荐文章于 2021-09-23 14:58:12 发布

阅读量3k

点赞数 1

分类专栏： 2020以前文章标签： css3动画 3D效果

本文链接：https://blog.csdn.net/csdn9_14/article/details/52675803

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

效果图：

注释：

ul * 表示ul下的所有样式都是这些。

改变代码中的ul *中的

<span style="font-size:18px;color:#cc33cc;">background-color: rgba(255, 100, 100, 0.5);</span>

即可改变魔方的颜色。

可以尝试通过改变perspective的值可以看下有什么效果。

代码：

<span style="font-size:18px;color:#3333ff;"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>3D魔方</title>
    <style type="text/css">
*
{
    margin:0;
	padding:0;
}

html
{
    background: -webkit-radial-gradient(center, ellipse, #40E0D0 0%, #000000 100%);
    background: radial-gradient(ellipse at center, #40E0D0 0%, #000000 100%);
    height: 100%;
}

body
{
	position: absolute;
    width: 400px;
    height: 400px;
	left:40%;
	top:20%;
    -webkit-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}

ul
{
    -webkit-animation:run 6s linear infinite;
    animation:run 6s linear infinite;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

ul *
{
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
    -webkit-background-size: 2.5em 2.5em, 2.5em 2.5em;
    background-size: 2.5em 2.5em, 2.5em 2.5em;
   
    background-color: rgba(255, 100, 100, 0.5);
    border: 2px solid rgba(54, 226, 248, 0.5);
    
<span style="white-space:pre">	</span>-webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
    box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);  
	display: block;
	position: absolute;
    height: 400px;
    width: 400px;
}

li
{
	list-style:none;	
}

li:nth-child(1)
{
    -webkit-transform: rotateX(180deg) translateZ(200px);
    -ms-transform: rotateX(180deg) translateZ(200px);
    transform: rotateX(180deg) translateZ(200px);
}

li:nth-child(2)
{
    -webkit-transform: rotateX(-90deg) translateZ(200px);
    -ms-transform: rotateX(-90deg) translateZ(200px);
    transform: rotateX(-90deg) translateZ(200px);
}

li:nth-child(3)
{
    -webkit-transform: rotateY(0deg) translateZ(200px);
    -ms-transform: rotateY(0deg) translateZ(200px);
    transform: rotateY(0deg) translateZ(200px);
}

li:nth-child(4)
{
    -webkit-transform: rotateY(-90deg) translateZ(200px);
    -ms-transform: rotateY(-90deg) translateZ(200px);
    transform: rotateY(-90deg) translateZ(200px);
}

li:nth-child(5)
{
    -webkit-transform: rotateY(90deg) translateZ(200px);
    -ms-transform: rotateY(90deg) translateZ(200px);
    transform: rotateY(90deg) translateZ(200px);
}

li:nth-child(6)
{
    -webkit-transform: rotateX(90deg) translateZ(200px);
    -ms-transform: rotateX(90deg) translateZ(200px);
    transform: rotateX(90deg) translateZ(200px);
}


@-webkit-keyframes run
{
    from
    {
        -webkit-transform: translateZ(-200px) rotateX(0) rotateY(0deg);
        transform: translateZ(-200px) rotateX(0) rotateY(0deg);
    }

    to
    {
        -webkit-transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
        transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
    }
}

@keyframes run
{
    from
    {
        -webkit-transform: translateZ(-200px) rotateX(0) rotateY(0deg);
        transform: translateZ(-200px) rotateX(0) rotateY(0deg);
    }

    to
    {
        -webkit-transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
        transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
    }
}

    </style>
</head>

<body>
	<ul>
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html></span>