欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

css实现魔方动画特效

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS3实现3D魔方动画特效 </title>

<style>

*{

margin:0;

padding:0;

}

body{

background: url(img/bg.jpg) 0 0 no-repeat; background-size: 100%;

-webkit-perspective: 800;

}

li{

list-style: none;

}

.box{

width:200px;

height:200px;

position: relative;

margin:300px auto;

-webkit-transform-style:preserve-3d;

-webkit-transform:rotateX(13deg);

-webkit-animation:move 5s linear infinite;

}

.minbox{

width:100px;

height:100px;

position: absolute;

left:50px;

top:50px;

-webkit-transform-style:preserve-3d;

}

.minbox li{

width:100px;

height:100px;

position: absolute;

left:0;

top:0;

}

.minbox li:nth-child(1){

background: url(img/01.png) no-repeat 0 0;

-webkit-transform:translateZ(50px);

}

.minbox li:nth-child(2){

background: url(img/02.png) no-repeat 0 0;

-webkit-transform:rotateX(180deg) translateZ(50px);

}

.minbox li:nth-child(3){

background: url(img/03.png) no-repeat 0 0;

-webkit-transform:rotateX(-90deg) translateZ(50px);

}

.minbox li:nth-child(4){

background: url(img/04.png) no-repeat 0 0;

-webkit-transform:rotateX(90deg) translateZ(50px);

}

.minbox li:nth-child(5){

background: url(img/05.png) no-repeat 0 0;

-webkit-transform:rotateY(-90deg) translateZ(50px);

}

.minbox li:nth-child(6){

background: url(img/06.png) no-repeat 0 0;

-webkit-transform:rotateY(90deg) translateZ(50px);

}

.maxbox{

width: 200px;

height: 200px;

position: absolute;

left: 0;

top: 0;

-webkit-transform-style: preserve-3d;

}

.maxbox li{

width: 200px;

height: 200px;

background: #fff;

border:1px solid #ccc;

position: absolute;

left: 0;

top: 0;

opacity: 0.2;

-webkit-transition:all 1s ease;

}

.maxbox li:nth-child(1){

-webkit-transform:translateZ(100px);

}

.maxbox li:nth-child(2){

-webkit-transform:rotateX(180deg) translateZ(100px);

}

.maxbox li:nth-child(3){

-webkit-transform:rotateX(-90deg) translateZ(100px);

}

.maxbox li:nth-child(4){

-webkit-transform:rotateX(90deg) translateZ(100px);

}

.maxbox li:nth-child(5){

-webkit-transform:rotateY(-90deg) translateZ(100px);

}

.maxbox li:nth-child(6){

-webkit-transform:rotateY(90deg) translateZ(100px);

}

.box:hover ol li:nth-child(1){

-webkit-transform:translateZ(300px);

}

.box:hover ol li:nth-child(2){

-webkit-transform:rotateX(180deg) translateZ(300px);

}

.box:hover ol li:nth-child(3){

-webkit-transform:rotateX(-90deg) translateZ(300px);

}

.box:hover ol li:nth-child(4){

-webkit-transform:rotateX(90deg) translateZ(300px);

}

.box:hover ol li:nth-child(5){

-webkit-transform:rotateY(-90deg) translateZ(300px);

}

.box:hover ol li:nth-child(6){

-webkit-transform:rotateY(90deg) translateZ(300px);

}

@keyframes move{

0%{

-webkit-transform: rotateX(13deg) rotateY(0deg);

}

100%{

-webkit-transform:rotateX(13deg) rotateY(360deg);

}

}

</style>

</head>

<body>

<div>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ol>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ol>

</div>

</body>

</html>

最终效果图:ps:执行以上代码后在浏览器中会看到实际效果图是旋转的

css实现魔方动画特效

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao50670.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-07-15 08:43 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。