2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例,

本文链接：https://blog.csdn.net/rowlet/article/details/121479720

文章目录

零.transform的用法

transform属性是CSS3新增属性,可用于div的移动,放大,缩放,旋转

常见属性值

1.属性值translate:转换

translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

2.属性值scale:缩放

scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

3,属性值rotate:旋转

rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

4.属性值skew:倾斜

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

一.示例:点击翻转扑克牌正反面

1. 注意事项

准备两张图片分别作为扑克牌的正面和反面
设置绝对定位让这两张图片重叠在一起
为上面的扑克牌背面设置backface-visibility:hidden,隐藏旋转的背面
为下面的扑克牌背面设置transform:rotateY(180deg),这样它翻转过来的时候不会显示为镜像
设置鼠标移入hover时两张图片的翻转,由于上面的设置,需注意两张图片的翻转角度不一样

2.完整代码

  <style>
    div{
     
      position: relative;
    }
    div>img{
     
      position: absolute;
      top:0;
      left:0;
      transition:all 3s;
    }
    #one{
     
      z-index:1;
	  backface-visibility: hidden;
    }
    #two{
     
      transform:rotateY(180deg);
    }
    div:hover #one{
     
      transform: rotateY(180deg);
    }
    div:hover #two{
     
      transform:rotateY(360deg);
    }
  </style>
<body>
  <div>
    <img src="./back.png" id="one">
    <img