CSS元素移动

元素移动

  • 2D平面移动
    • 水平竖直移动
    • 旋转
  • 3D移动
    • 3D旋转
  • 立体正方体六面为图片
    • 绕由原点指向某一定点的向量轴旋转

2D平面移动

水平竖直移动

水平竖直移动采用属性:transform中的translate(x,y)
一起设置水平和竖直移动:

transform: translate(x,y);
//单位为像素px

分开设置水平移动和竖直移动

transform: translateX();
transform: translateY();
//单位为像素

旋转

旋转采用属性:transform中的rotate();

transform: rotate();
//单位为角度deg

3D移动

3D旋转

要实现3D的旋转就要在2D的基础上增加透视点
旋转可以选择的轴X,Y,Z
Z轴为垂直屏幕射向用户的方向
X轴为水平轴,Y轴为竖直轴
对应的属性分别为:

transform: rotateX();
transform: rotateY();
transform: rotateZ();
//单位角度deg

透视点属性:perspective
像素值表示距离透视点多少像素,正值靠近,负值远离

perspective: 像素值px;
//单位像素

立体正方体六面为图片

原理:先旋转再增加距离,需要注意的是在旋转的过程中X,Y,Z轴会跟着旋转,所以在旋转后的移动轴的选择还是需要一定空间想象能力的。
围绕X,Y,Z三轴的旋转


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        body{
            /*设置透视点*/
            perspective: 1000px;
        }
        .lifangti{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            /*设置保留子元素的3D效果*/
            transform-style: preserve-3d;

        }
        .page{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            /*透明度*/
            opacity: 0.6;
        }
        .front{
            background-image: url("CSS_img/V3.png");
            background-size: 100% auto;
            transform: translateZ(100px);
        }
        .back{
            background-image: url("CSS_img/V1.png");
            background-size: 100% auto;
            transform: translateZ(-100px);
        }
        .right{
            background-image: url("CSS_img/V2.png");
            background-size: 100% auto;
            transform: rotateY(90deg) translateZ(100px);
            /*轴跟着旋转而旋转*/
        }
        .left{
            background-image: url("CSS_img/V4.png");
            background-size: 100% auto;
            transform: rotateY(-90deg) translateZ(100px);
            /*轴跟着旋转而旋转*/
        }
        .top{
            background-image: url("CSS_img/V5.png");
            background-size: 100% auto;
            transform: rotateX(90deg) translateZ(100px);
            /*轴跟着旋转而旋转*/
        }
        .bottom{
            background-image: url("CSS_img/V6.png");
            background-size: 100% auto;
            transform: rotateX(90deg) translateZ(-100px);
            /*轴跟着旋转而旋转*/
        }
    style>
head>
<body>
        <div class="lifangti">
            <div class="page front">div>
            <div class="page back">div>
            <div class="page left">div>
            <div class="page right">div>
            <div class="page top">div>
            <div class="page bottom">div>
        div>
body>
html>

效果:

CSS元素移动_第1张图片

绕由原点指向某一定点的向量轴旋转

设置原点指向某一定点的向量:

transform: rotate3d(x,y,z,角度);

所有代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        body{
            /*设置透视点*/
            perspective: 1000px;
        }
        .lifangti{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            /*设置保留子元素的3D效果*/
            transform-style: preserve-3d;
            transition: all 2s;
        }
        .lifangti:hover{
            transform: rotate3d(1,1,1,180deg);
        }
        .page{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            /*透明度*/
            opacity: 0.6;
        }
        .front{
            background-image: url("CSS_img/V3.png");
            background-size: 100% auto;
            transform: translateZ(100px);
        }
        .back{
            background-image: url("CSS_img/V1.png");
            background-size: 100% auto;
            transform: translateZ(-100px);
        }
        .right{
            background-image: url("CSS_img/V2.png");
            background-size: 100% auto;
            transform: rotateY(90deg) translateZ(100px);
            /*轴跟着旋转而旋转*/
        }
        .left{
            background-image: url("CSS_img/V4.png");
            background-size: 100% auto;
            transform: rotateY(-90deg) translateZ(100px);
            /*轴跟着旋转而旋转*/
        }
        .top{
            background-image: url("CSS_img/V5.png");
            background-size: 100% auto;
            transform: rotateX(90deg) translateZ(100px);
            /*轴跟着旋转而旋转*/
        }
        .bottom{
            background-image: url("CSS_img/V6.png");
            background-size: 100% auto;
            transform: rotateX(90deg) translateZ(-100px);
            /*轴跟着旋转而旋转*/
        }
    style>
head>
<body>
        <div class="lifangti">
            <div class="page front">div>
            <div class="page back">div>
            <div class="page left">div>
            <div class="page right">div>
            <div class="page top">div>
            <div class="page bottom">div>
        div>
body>
html>

你可能感兴趣的:(网页开发笔记,css,js,css3,html,3d)