CSS3实现3D方块旋转

最新推荐文章于 2024-05-22 07:00:00 发布

wannomore

最新推荐文章于 2024-05-22 07:00:00 发布

阅读量3.9k

点赞数

分类专栏：前端文章标签： css3 动画 3d

本文链接：https://blog.csdn.net/u013096194/article/details/52315399

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文是在学习一篇博文后进行总结和一定的修改的，原博文链接这里写链接内容

先贴代码
HTML

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>animation</title>
      <link rel="stylesheet" type="text/css" href="css/move.css">
</head>
<body>
<div class="wrapper w2">
    <div class="cube">
        <div class="side  front">1</div>
        <div class="side   back">6</div>
        <div class="side  right">4</div>
        <div class="side   left">3</div>
        <div class="side    top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>
</body>
</html>

CSS

.wrapper {
    width: 50%;
    float: left;
}
@keyframes rotateHAHA{
      0%{
            transform: rotateX(0deg) rotateY(0deg);
      }
      100%{
            transform: rotateX(360deg) rotateY(360deg);
      }
}
.cube {
    font-size: 4em;
    width: 2em;
    height: 2em;
    margin: 1.5em auto;
    transform-origin: 1em 1em;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
}
.cube:hover{
      animation: rotateHAHA 4s linear infinite;
}
.side {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(255, 99, 71, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    line-height: 2em;
}
.front {
    transform: translateZ(1em);//为什么要translateZ(1em)。1em代表了什么？
}
.top {
    transform: rotateX(90deg) translateZ(1em);//注意rotate和translateZ的顺序。之后会提到。
}
.right {
    transform: rotateY(90deg) translateZ(1em);
}
.left {
    transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
    transform: rotateX(-90deg) translateZ(1em);
}

.back {
    transform: rotateY(-180deg) translateZ(1em);
}
.w2{
      perspective-origin: 20% 20%;
    perspective: 1000px;
}

几点学习心得记录如下：

初始工作

想要实现3D效果，首先需要设定transform-style: preserve-3d;。这个属性只对本元素以及子元素起作用，不对孙子元素起作用。

perspective设置

perspective属性的含义：可以理解为在人眼面前有一个展示板，而这个属性的大小就是这个展示板距离人眼的距离。如果距离越近，自然透视程度就越强，距离越远，透视程度就越弱。
有两种方式设置perspective：

perspective: 600px;

或者

transform:perspective(600px);

这两种设置的区别先看例图：（转自这里写链接内容)
这里写图片描述
可以看出，第一种设置方式是把整个页面当成一个舞台，各个物体虽然属性相同，但是互相之间是有透视关系的。
而第二种设置方式是每一个物体独立开来，这样互不影响。

translateZ的设置

transform:translateZ(length)的作用是将展示的物体脱离展示板的距离。也就是说，如果参数越大，脱离展示板越远，离人眼就越近。可以想象，如果这个length的值大于perspective的值，那么物体位于人眼后面，此时这个物体将看不到。

视点位置设置

perspective-origin属性：默认的值是50% 50%也就是说位于物体中央。我们可以修改这个参数，使得我们的视角可以位于高一点或者第一点的位置。具体可以看这张w3c的图这里写图片描述

父元素与子元素的旋转关系

可以看到cube是六个面的容器。因此这六个面的旋转都是相对于cube父容器的，如果父容器旋转，六个面也跟着旋转，就形成了我们看到的动画效果。

rotate()理解

关于rotateX()、rotateY()、rotateZ()：我们知道，屏幕上，右是x轴正方形，上是y轴正方向，垂直平面是Z方向。因此rotateX的具体含义是绕着X轴旋转，其他类似。

translateZ的参数解释

关于translateZ()的参数为什么填的是1em。因为旋转默认是在展示板上的物体中心点。而cube的长宽都是2em。故在Z轴上升高1em然后旋转就可以形成正方体。

transform具有多个值时执行顺序

transform具有多个属性的时候，执行顺序是从后到前。比如这个例子中就是先translateZ，再rotate。故写多个属性的时候，应该将最先执行的代码写在最后面！

wannomore

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现3D方块旋转

本文是在学习一篇博文后进行总结和一定的修改的，原博文链接这里写链接内容先贴代码 HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation</title> <link rel="stylesheet" type="text/css" href="css/
复制链接

扫一扫