CSS3之转换属性

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门


文章目录

  • 系列文章目录
  • CSS3 中的转换
    • 2D 转换
      • 移动
      • 旋转
      • 缩放
      • 倾斜
      • 转换中心
      • 简写
    • 3D 转换
      • 移动
      • 旋转
      • 缩放
      • 3D 效果需要设置的属性
      • 3D 立方体效果
      • 翻牌子效果


CSS3 中的转换

  • CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸

  • transform 适用于2D或3D转换的元素

  • deg 角度

  • 需要注意的是: 当一个元素同时设置多个转换效果时,需要注意“轴”的变化

2D 转换

移动

  • translate(x,y) 定义 2D 移动,沿着 X 和 Y 轴移动元素
  • translateX(n) 定义 2D 移动,沿着 X 轴移动元素
  • translateY(n) 定义 2D 移动,沿着 Y 轴移动元素

旋转

  • rotate(angle) 定义 2D 旋转,在参数中规定角度,在一个平面内进行旋转

缩放

  • scale(x,y) 定义 2D 缩放,改变元素的宽度和高度
  • scaleX(n) 定义 2D 缩放,改变元素的宽度
  • scaleY(n) 定义 2D 缩放,改变元素的高度

倾斜

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

转换中心

  • transform-origin 定义 转换中心
    在没有设置过transform-origin属性时,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点/中心点)位置进行变形的。而 CSS3 中的transform-origin属性用于设置旋转元素的基点位置
    属性值可以是百分比empx等具体的值,也可以是toprightbottomleftcenter这样的关键词

简写

2D转换多个值都是作用时,需要注意的时,转换中心和转换轴的变化!!!

transform: rotate(45deg);
transform: translateX(200px) rotate(45deg);

transform: rotate(45deg) translateX(200px);

当同时有位移和其他属性的时候,记得要将位移放到最前

3D 转换

移动

  • translate3d(x,y,z) 定义 3D 移动
  • translateX(x) 定义 3D 移动,仅使用用于 X 轴的值
  • translateY(y) 定义 3D 移动,仅使用用于 Y 轴的值
  • translateZ(z) 定义 3D 移动,仅使用用于 Z 轴的值

旋转

  • rotate3d(x,y,z,angle) 定义 3D 旋转 注意矢量坐标系!!!
  • rotateX(angle) 定义沿 X 轴的 3D 旋转 等同于rotate3d(1,0,0,par)
  • rotateY(angle) 定义沿 Y 轴的 3D 旋转 等同于rotate3d(0,1,0,par)
  • rotateZ(angle) 定义沿 Z 轴的 3D 旋转 等同于rotate3d(0,0,1,par)

缩放

  • scale3d(x,y,z) 定义 3D 缩放
  • scaleX(x) 定义 3D 缩放,通过给定一个 X 轴的值
  • scaleY(y) 定义 3D 缩放,通过给定一个 Y 轴的值
  • scaleZ(z) 定义 3D 缩放,通过给定一个 Z 轴的值

3D 效果需要设置的属性

  1. 给父级元素添加

    • perspective 景深,定义 3D 转换元素的透视视图
      一般使用 看起来最适应 800px 或者 1200px 加在 body
    • transform-style 属性指定嵌套元素是怎样在三维空间中呈现
      • flat 表示所有子元素在2D平面呈现
      • preserve-3d 表示所有子元素在3D空间中呈现
        注意:transform-style属性需要设置在父元素中,并且高于任何嵌套的变形元素
    • perspective-origin 定义 3D 元素所基于的 X 轴和 Y 轴
      • x-axis 定义该视图在 x 轴上的位置。默认值:50%
      • y-axis 定义该视图在 y 轴上的位置。默认值:50%
  2. 给子级元素添加

    • backface-visibility 定义当元素背面向屏幕时是否可见
      • visible 背面是可见的
      • hidden 背面是不可见的

3D 立方体效果

翻牌子效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body{
            transform-style: preserve-3d;
            
        }
        .big{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            border-radius: 50%;
            transition: all 3000000000000s;
            /* 设置元素背向屏幕不可见 */
            backface-visibility: hidden;
        }
        .a,.b{
            width: 300px;
            height: 300px;
            position: absolute;
            border-radius: 50%;
            font-size: 50px;
            color: #fff;
            line-height: 300px;
            text-align: center;
            backface-visibility: hidden;
        }
        .a{
            background-color: deeppink;
            z-index: 2;
        }
        .b{
            background-color: deepskyblue;
            transform: rotateY(180deg);
        }
        .big:hover{
            transform: rotateY(180000000000000000000deg);
        }
    style>
head>
<body>
    <div class="big">
        <div class="a">正面div>
        <div class="b">反面div>
    div>
body>
html>

你可能感兴趣的:(全栈工程师的基本素养,#,前端开发,css3,css,前端,html5,html)