css3实现正方体和旋转效果
程序员文章站
2022-07-12 23:32:10
...
css3实现正方体和旋转效果
实现效果图
涉及知识点
- 3D移动
方法：translate3d(x,y,z)
单独设置：translateX(length)，translateY(length)，translateZ(length) - 3D旋转
方法：rotate3d(x,y,z,angle) - 3D动画结果保留设置
transform-style:preserve-3d;子元素将保留其3d位置 --立体方式，被转换的子元素保留其3d转换结果（需要设置在父元素中）
实现步骤
- 步骤一
页面排版基本结构，一个div作为正方体主容器，内部6个div分别为前、后、左、右、上、下六个面，按以下样式进行基本样式设置，示例按200px宽高进行演示。为了能看到立体效果，需要先在父级元素.box中设置3D动画结果保留属性transform-style:preserve-3d;和主体沿着XY轴对角旋转30度；transform:rotate3d(1,1,0,-30deg);效果如下：
css样式
<style>
* {
padding: 0;
margin: 0;
/*禁止页面文字选择*/
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
}
.box{
position:relative;
width: 200px;
height: 200px;
margin:200px auto;
/*保留子元素3D动画效果*/
transform-style:preserve-3d;
/*俯角预览效果预设，方便查看3D效果*/
transform:rotate3d(1,1,0,30deg);
}
.box>div{
position:absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
/*设置透明度，方便查看*/
opacity: 0.8;
}
.front {
background-color: red;
}
.back {
background-color: green;
}
.left {
background-color: blue;
}
.right {
background-color: cyan;
}
.top {
background-color: pink;
}
.bottom {
backgrond-color: purple;
}
</style>
元素结构
<div class="box">
<div class="front">前面</div>
<div class="back">后面</div>
<div class="left">左面</div>
<div class="right">右面</div>
<div class="top">上面</div>
<div class="bottom">下面</div>
</div>
- 步骤二
实现正面和背面的移动,正面沿着z轴向前移动100pxtransform:translateZ(100px);；背面向后移动100pxtransform:translateZ(-100px);如下：
<style>
.front {
background-color: red;
transform:translateZ(100px);
}
.brack {
background-color: green;
transform:translateZ(-100px);
}
</style>
- 步骤三
左右两面移动，需要主要，应该是先实现移动再进行旋转，否则会因旋转改变坐标轴方向，影响移动结果；
左面：先沿着X左侧移动100px，再沿着Y轴逆时针旋转90度 transform:translateX(-100px) rotateY(-90deg);
右面：先沿着X右侧移动100px，再沿着Y轴顺时针旋转90度 transform:translateX(100px) rotateY(90deg);
.left {
background-color: blue;
transform:translate(-100px) rotateY(-90deg);
}
.right {
background-color: cyan;
transform:translate(100px) rotateY(90deg);
}
- 步骤四
上面：先沿着Y上方移动100px，再沿着X轴顺时针旋转90度transform:translateY(-100px) rotateX(90deg);
下面：先沿着Y下方移动100px，再沿着X轴逆时针旋转90度transform:translateY(100px) rotateX(-90deg);
.top {
background-color: pink;
transform:translateY(-100px) rotateX(90deg);
}
.bottom {
backgrond-color: purple;
transform:translateY(100px) rotateX(-90deg);
}
- 点击旋转动画
css3伪类属性active中设置，动画旋转；点击时，会**动画效果。同时.box样式中设置动画执行效果按5秒执行完成transition:transform 5s;
.box:active{
transform:rotate3d(1,1,0,360deg) rotate3d(0,1,1,360deg);
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
/*禁止页面文字选择*/
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
}
.box{
position:relative;
width: 200px;
height: 200px;
margin:200px auto;
/*保留子元素3D动画效果*/
transform-style:preserve-3d;
/*俯角预览效果预设，方便查看3D效果*/
transform:rotate3d(1,1,0,-30deg);
/*定义动画执行时间*/
transition:transform 5s;
}
.box>div{
position:absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
/*设置透明度，方便查看*/
opacity: 0.8;
}
.front {
background-color: red;
transform:translateZ(100px);
}
.brack {
background-color: green;
transform:translateZ(-100px);
}
.left {
background-color: blue;
transform:translateX(-100px) rotateY(-90deg);
}
.right {
background-color: cyan;
transform:translateX(100px) rotateY(90deg);
}
.top {
background-color: pink;
transform:translateY(-100px) rotateX(90deg);
}
.bottom {
backgrond-color: purple;
transform:translateY(100px) rotateX(-90deg);
}
.box:active{
transform:rotate3d(1,1,0,360deg) rotate3d(0,1,1,360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前面</div>
<div class="brack">后面</div>
<div class="left">左面</div>
<div class="right">右面</div>
<div class="top">上面</div>
<div class="bottom">下面</div>
</div>
</body>
</html>