scss实践 webpack立方体_scss立方体效果-CSDN博客

本文链接：https://blog.csdn.net/kaizi524/article/details/76548986

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <link rel="stylesheet" href="style.css">
    <body>
    	<div class="demo-cube">
    		<ul class="cube-inner">
    			<li class="top">1</li>
    			<li class="bottom">2</li>
    			<li class="front">3</li>
    			<li class="back">4</li>
    			<li class="right">5</li>
    			<li class="left">6</li>
    		</ul>
    	</div>
    </body>
</html>

/*
* @Author: owlcity
* @Date:   2017-08-01 17:02:04
* @Last Modified by:   owlcity
* @Last Modified time: 2017-08-01 17:43:47
*/
*{margin: 0;padding: 0;}
ul,li{list-style: none}
.demo-cube{
	position: absolute;
	height: 200px;
	width: 100%;
	background-color: #efefef;
	zoom: 2;
}
.cube-inner{
	position: absolute;
	width: 50px;
	height: 50px;
	left: 50%;
	top: 50%;
	margin: -25px 0 0 -25px;
	transform-style:preserve-3d;
	transform-origin:25px 25px;
	transform: rotateX(-33.5deg) rotateY(45deg);
	animation: speed 6s ease-in-out infinite 2s;
}
.cube-inner li{
	position: absolute;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	background:radial-gradient(transparent 30%,rgba(0,0,0,.3) 100%);
}
.cube-inner li:before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:rgba(255,255,255,.7);
	backface-visibility:hidden;
	filter:blur(10px);
}
.demo-cube .cube-inner .top {
	-webkit-transform: rotateX(90deg) translateZ(25px);
	transform: rotateX(90deg) translateZ(25px)
}

.demo-cube .cube-inner .bottom {
	-webkit-transform: rotateX(-90deg) translateZ(25px);
	transform: rotateX(-90deg) translateZ(25px)
}

.demo-cube .cube-inner .front {
	-webkit-transform: translateZ(25px);
	transform: translateZ(25px)
}

.demo-cube .cube-inner .back {
	-webkit-transform: rotateX(-180deg) translateZ(25px);
	transform: rotateX(-180deg) translateZ(25px)
}

.demo-cube .cube-inner .left {
	-webkit-transform: rotateY(-90deg) translateZ(25px);
	transform: rotateY(-90deg) translateZ(25px)
}

.demo-cube .cube-inner .right {
	-webkit-transform: rotateY(90deg) translateZ(25px);
	transform: rotateY(90deg) translateZ(25px)
}

@-webkit-keyframes speed {
	0% {
		-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
		transform: rotateX(-33.5deg) rotateY(45deg)
	}

	40%,to {
		-webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
		transform: rotateX(-33.5deg) rotateY(-315deg)
	}
}