Web前端实训--day02 – 源码巴士

CSS属性

1，float--float 属性定义元素在哪个方向浮动。

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

2，position--position 属性规定元素的定位类型。

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

3，transform--transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

4，animation--animation 属性是一个简写属性，用于设置六个动画属性。

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

应用实例--旋转立方体

<html>
<head>

<title>旋转立方体</title>
<style>
     @keyframes roll {
            from {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to {
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }

    *{
        margin: 0;
        padding: 0;
    }
    div{
        width:200px;
        height: 200px;
        background-color: aquamarine;
        line-height: 200px;
        text-align: center;
        color: white;
        font-size: 40px;
        position: absolute;
    }
    .wrap{
        padding: 100px;
        background-color: transparent;
        transform-style: preserve-3d;  /*开启3D效果*/
        animation: roll 8s linear infinite;

    }
    .wrap div:nth-of-type(1){
        transform: rotateY(-90deg) translateZ(100px);
        background-color: tomato;
    }
    .wrap div:nth-of-type(2){
        transform: rotateY(90deg) translateZ(100px);
        background-color: violet;
    }
    .wrap div:nth-of-type(3){
        transform: rotateX(90deg) translateZ(100px);
        background-color: yellowgreen;
    }
    .wrap div:nth-of-type(4){
        transform: rotateX(-90deg) translateZ(100px);
        background-color: aqua;
    }
    .wrap div:nth-of-type(5){
        transform: translateZ(100px);
        background-color: aquamarine;
    }
    .wrap div:nth-of-type(6){
        transform: rotateX(180deg) translateZ(100px);
        background-color:royalblue;
    }
   img{
       width: 100%;
       height: 100%;
   }

</style>
</head>
<body>
  <div class="wrap">
      <!-- 左右 -->
      <div><img src="flower1.jpg"></div>
      <div><img src="flower2.jpg"></div>
      <!-- 上下 -->
      <div><img src="flower3.jpg"></div>
      <div><img src="flower4.jpg"></div>
      <!-- 前后 -->
      <div><img src="flower5.jpg"></div>
      <div><img src="flower7.jpg"></div>
  </div>

</body>
</html>

运行结果

原文链接：https://blog.csdn.net/m0_51324333/article/details/121366065