- 软件开发
- css3--旋转的3D魔方
<!DOCTYPE html
>
<html>
<head>
<meta charset
="utf-8">
<meta http
-equiv
="X-UA-Compatible" content
="IE=edge">
<title></title
>
<link rel
="stylesheet" href
="">
<style type
="text/css" media
="screen">
@keyframes round
{
0%{transform
: rotateY(0deg
) rotateX(0deg
);}
100%{transform
: rotateY(360deg
) rotateX(360deg
);}
}
html
,body
{
width
:100%;
height
:100%;
perspective
: 3000px
;
}
.con
{
position
: absolute
;
width
:300px
;
height
:300px
;
opacity
: 0.3;
}
.wra
{
transform
-style
: preserve
-3d;
position
: absolute
;
width
:300px
;
height
:300px
;
top
:calc(50% - 150px
);
left
:calc(50% - 150px
);
animation
:round
10s linear infinite
;
}
.con
:nth
-of
-type(1){
background
-color
: red
;
transform
: rotateY(90deg
) translatez(150px
);
}
.con
:nth
-of
-type(2){
background
-color
: blue
;
transform
: rotateY(180deg
) translatez(150px
);
}
.con
:nth
-of
-type(3){
background
-color
: green
;
transform
: rotateY(270deg
) translatez(150px
);
}
.con
:nth
-of
-type(4){
background
-color
: yellow
;
transform
: rotateY(360deg
) translatez(150px
);
}
.con
:nth
-of
-type(5){
background
-color
: black
;
transform
: rotateX(90deg
) translatez(-150px
);
}
.con
:nth
-of
-type(6){
background
-color
:#B14DA1FF
;
transform
: rotateX(90deg
) translatez(150px
);
}
</style
>
</head
>
<body>
<div
class="wra">
<div
class="con"></div
>
<div
class="con"></div
>
<div
class="con"></div
>
<div
class="con"></div
>
<div
class="con"></div
>
<div
class="con"></div
>
</div
>
<script>
document
.body
.onmousemove
=function(e
){
this.style
.perspectiveOrigin
=""+e
.pageX
+"px "+e
.pageY
+"px";
}
</script
>
</body
>
</html
>
