CSS3实现3D旋转
CSS3实现3D旋转
常用的3D效果样式如下：
perspective: 600px; // 透视效果，值越小，透视越明显
perspective-origin: center center; // 透视中心点位置
transform: rotateX(70deg) rotateY(15deg); // 3D旋转
transform: translateX(100px) translateY(100px) translateZ(100px); // 3D偏移
transform-style: preserve-3d; // 3D呈现，基本必须，不然就是2D的
例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
position: absolute;
width: 100%;
height: 100%;
perspective: 600px; /*透视效果*/
perspective-origin: center center;
}
#circleWrap {
transform: rotateX(70deg) rotateY(15deg);
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
#circle {
width: 200px;
height: 200px;
border: 10px solid #eee;
border-radius: 50%;
animation: mytotate1 4s infinite linear;
transform-style: preserve-3d;
}
#circle .dot {
position: absolute;
width: 26px;
height: 26px;
top: -13px;
left: 100px;
background-color: #999;
border-radius: 50%;
animation: mytotate2 4s infinite linear;
transform: rotateX(-90deg);
}
#core {
width: 120px;
height: 120px;
position: relative;
left: 50%;
top: -50%;
margin-top: -60px;
margin-left: -60px;
border-radius: 50%;
background-color: #666;
transform: rotateX(-70deg);
}
@keyframes mytotate1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes mytotate2 {
from {
transform: rotate(360deg) rotateX(-70deg);
}
to {
transform: rotate(0deg) rotateX(-70deg);
}
}
</style>
</head>
<body>
<div id="circleWrap">
<div id="circle">
<div class="dot"></div>
</div>
<div id="core"></div>
</div>
</body>
</html>
例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d-cube</title>
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: #000;
height: 100%;
padding: 0;
margin: 0;
perspective: 1600px; /*透视效果*/
perspective-origin: center center;
}
.container {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
transform-style: preserve-3d; /*这个是很重要的*/
/*transform: rotateX(0deg) rotateY(0deg);*/
animation: rotate infinite 12s linear;
}
.cube {
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(90deg);
}
.side { /*主边*/
position: absolute;
width: 200px;
height: 200px;
border: 2px dotted rgba(255, 213, 0, 0.35);
border-radius: 50%;
transform-style: preserve-3d; /*节点的伪节点不可继承，故需要重新声明*/
}
.side::before, .side::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 50%;
border: 1px solid;
box-shadow: inset 0 0 60px, 0 0 110px;
}
.side::before { /*内边*/
width: 100px;
height: 100px;
color: gold;
}
.side::after { /*内边*/
width: 80px;
height: 80px;
color: teal;
box-shadow: inset 0 0 40px, 0 0 90px;
transform: translateZ(-30px); /*3d处理，向内侧偏移*/
}
.side-inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
border: 1px solid;
box-shadow: inset 0 0 30px, 0 0 80px;
color: orangered;
transform: translateZ(30px);
transform-style: preserve-3d;
}
.side-inner::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 50%;
border: 1px solid;
box-shadow: inset 0 0 20px, 0 0 60px;
width: 40px;
height: 40px;
color: purple;
transform: translateZ(30px);
}
.side-front { /*设置面位置*/
transform: translateZ(100px);
}
.side-back {
transform: rotateY(180deg) translateZ(100px);
}
.side-left {
transform: rotateY(-90deg) translateZ(100px);
}
.side-right {
transform: rotateY(90deg) translateZ(100px);
}
.side-top {
transform: rotateX(90deg) translateZ(100px);
}
.side-bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
100% {
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="side side-front"><div class="side-inner"></div></div>
<div class="side side-back"><div class="side-inner"></div></div>
<div class="side side-left"><div class="side-inner"></div></div>
<div class="side side-right"><div class="side-inner"></div></div>
<div class="side side-top"><div class="side-inner"></div></div>
<div class="side side-bottom"><div class="side-inner"></div></div>
</div>
</div>
</body>
</html>