css 旋转45_CSS教程——第14期-白红宇的个人博客

css 旋转45_CSS教程——第14期

发布日期：2021-06-24 15:58:47 浏览次数：2 分类：技术文章

本文共 4015 字，大约阅读时间需要 13 分钟。

警告！本期内容建议CSS基础良好的人看，本期为实战篇，难度有点大

哈喽大家好我是wawjf

灰常抱歉我们咕咕了快两周，主要原因是我们的几位作者(加上我其实就两个)去夏令营学习了某重要东西，所以没时间更新，在这里对催更的各位朋友们说声对不起哈

(放个照片各位自己感受)

如果我猜得没错，这期应该是正式期的最后一期了，接下来有时间可能会出番外篇，但是是不定时哦

这期我们就来讲一个很重要的内容——3D变形(动画)的实战

1题干

我们要用3D变形(动画)制作一个正方体，然后设计它在光标经过时沿Y轴旋转，像下面这样：

2思路

首先我们要来梳理一下我们做这个动画的流程，这里我已经帮大家梳理好了：

第1步，我们要先对盒子进行一个设计

第2步，我们要对盒子做一些样式调整以及变形(动画)的安排

第3步，我们要定义关键帧

第4步，定义动画的触发方式

注意：在过程中，各位可能会看到一些没遇到过的属性，不必担心，因为这些属性比较冷门，所以我们不会当作重点来教学，大家只要知道即可

3实践

我们先写好基本代码：

3.1盒子的设计

class="stage"> <div class="container"> <div class="side front">前面div> <div class="side back">背面div> <div class="side left">左面div> <div class="side right">右面div> <div class="side top">顶面div> <div class="side bottom">底面div> div></div>

这个比较好理解，首先我们先用一个大容器stage来定义立方体，然后再定义每一面，并取名

3.2样式安排

这个比较复杂，我们区分讲

3.2.1定义画布

.stage {
          width: 300px;    height: 300px;    margin: 15px auto;    position: relative;    perspective: 300px;}

这里表示创建一个高300px(height)，宽300px(width)的一个画布，其中有一个属性我们可能没讲过，那就是perspective，这个属性用来设置视图的距离(其实一点用处都没有)

3.2.2定义盒子的亿些样式

.container {
          top: 50%;    left: 50%;    margin: -100px 0 0 -100px;    position: absolute;    transform: translateZ(-100px);    transform-style: preserve-3d;}

这个用来定义盒子包含框的样式，transform-style表示元素的呈现形式，默认就是preserve-3d，表示在3D中呈现(没用*2)

.side {
          background: rgba(255,0,0,0.3);    border: 1px solid red;    font-size: 60px;    font-weight: bold;    color: #fff;    height: 196px;    line-height: 196px;    position: absolute;    text-align: center;    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);    text-transform: uppercase;    width: 196px;}

这个用来定义盒子六面的基本样式，应该没有我们没讲过的，不知道rgba的请自行网上搜索

.front {
          transform: translateZ(100px);}.back {
          transform: rotateX(180deg) translateZ(100px);}.left {
          transform: rotateY(-90deg) translateZ(100px);}.right {
          transform: rotateY(90deg) translateZ(100px);}.top {
          transform: rotateX(90deg) translateZ(100px);}.bottom {
          transform: rotateX(-90deg) translateZ(100px);}

3.3定义动画关键帧

@keyframes spin {
       0% {
      transform:rotateY(0deg)} 100% {
      transform:rotateY(360deg)}}

这个也比较好理解，看过上期的就知道，这里我们定义了一个名叫spin的关键帧，在动画的开头以Y轴为准旋转0度，在结尾旋转360度，其实就是一个补间动画

3.4定义动画触发方式

.container:hover {
          animation: spin 5s linear infinite;}

这里我们运用了hover选择器，表示当鼠标的位置在元素上的时候，触发的动作

animation的函数我们也讲过了，就是引用我们上面定义的spin函数，然后对时间，动画运动等参数进行设定，不懂的看前面

------------

没错，我们的代码写完了

完整代码如下————

 
      
      
        @keyframes spin {
       0% {
      transform:rotateY(0deg)} 100% {
      transform:rotateY(360deg)}}.stage {
          width: 300px;    height: 300px;    margin: 15px auto;    position: relative;    perspective: 300px;}.container {
          top: 50%;    left: 50%;    margin: -100px 0 0 -100px;    position: absolute;    transform: translateZ(-100px);    transform-style: preserve-3d;}.container:hover {
          animation: spin 5s linear infinite;}.side {
          background: rgba(255,0,0,0.3);    border: 1px solid red;    font-size: 60px;    font-weight: bold;    color: #fff;    height: 196px;    line-height: 196px;    position: absolute;    text-align: center;    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);    text-transform: uppercase;    width: 196px;}.front {
          transform: translateZ(100px);}.back {
          transform: rotateX(180deg) translateZ(100px);}.left {
          transform: rotateY(-90deg) translateZ(100px);}.right {
          transform: rotateY(90deg) translateZ(100px);}.top {
          transform: rotateX(90deg) translateZ(100px);}.bottom {
          transform: rotateX(-90deg) translateZ(100px);}style>
       title>head>
           
                
         
          前面div>        
          
           背面div>        
           
            左面div> 
            
             右面div> 
             
              顶面div> 
              
               底面div> div>div>body>html>