CSS元素移动

最新推荐文章于 2024-05-20 16:31:09 发布
最新推荐文章于 2024-05-20 16:31:09 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 网页开发笔记 文章标签： css js css3 html 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45924251/article/details/118425086
版权

元素移动

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三轴的旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

效果：

在这里插入图片描述

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

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

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

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
凯撒袁六兽
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS制作移动动画效果
w__qwwq的博客
09-09 6698
CSS制作移动动画效果
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）(1)
2301_77033813的博客
05-05 954
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
css平移
weixin_54138158的博客
05-04 5835
目录 一、变形就是指通过CSS来改变元素的形状或位置 二、平移如何使元素在页面的正中大小不确定，仅被内容撑开) 三、z轴平移（并没有改变元素的大小） 一、变形就是指通过CSS来改变元素的形状或位置 变形不会影响到页面的布局 transform 用来设置元素的变形效果 平移： translateX() 沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平移 平移元素，百分比是相对于自身计算的 transform: tran...
CSS学习笔记：空间转换——使用transform属性实现元素在空间内的位移、旋转、缩放等效果
最新发布
lbcbjtlhmjq的博客
05-20 267
使用perspective属性实现透视效果什么是透视：近大远小，近实远虚说明：perspective的值指的是透视距离，透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
css中如何调整元素位置
杜永康的博客
09-02 9664
当这个div变成弹性容器时，那弹性容器对应的项目属性才有用，才会有效果。5种方法去解决元素位置问题，诚然，如果掌握了弹性容器，就完全没有必要使用float，但是transform却还是非常常用的。我们通常把样式层叠表叫做css，它是用来修饰html内容的，给内容加各种各样的样式和效果。可以使用top， left， right， bottom四个方向的值去调整元素的位置。absolute 绝对定位，根据最近的有定位方式的父元素进行定位。sticky 粘性定位，根据页面滚动的位置进行定位，
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
NewHouser的博客
10-25 5887
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
CSS 浮动元素
jcf52的博客
04-21 835
在 CSS 中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 一.clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素 right...
用css3实现元素移动
Sean's Technology Blog
09-13 3503
js: // JavaScript Document var Transform={ deleteTransform:function(){ var originX="0%"; var originY="0%"; var transformOriginString="0%"
html+css+移动web 思维导图
03-30
在这个“html+css+移动web”思维导图中，我们可以深入探讨这两个主题以及它们在移动设备上的应用。 1. HTML基础： HTML是一种标记语言，用于创建网页的结构。它的主要元素包括： - 标签：如`<html>`, `<head>`, `...
CSS3控制HTML元素动画效果
09-25
在CSS3中，`transform`属性允许我们对元素进行平移、旋转、缩放等操作。例如，`.sliderright:hover`选择器中的`-webkit-transform:translate(30em, 0); transform:translate(30em, 0);`会使得元素在鼠标悬停时向右...
CSS3太空圆点移动动画特效
07-24
为了增强视觉效果，我们还可以添加星光或其他元素，如流星或行星，通过CSS3的变换（`transform`）和透明度（`opacity`）调整，使得它们在背景中闪烁或移动。 总结起来，实现“CSS3太空圆点移动动画特效”主要涉及...
CSS移动重置
02-02
CSS移动重置主要是通过编写一组全局的CSS规则，清除或统一所有元素的默认样式，从而消除浏览器之间的差异。这样做的目的是让开发者在一个干净的环境中开始构建页面，避免因浏览器默认样式而产生的额外工作。 **三、...
纯CSS实现波浪移动效果的示例
09-24
本文将深入探讨如何利用CSS来创建具有波浪效果的元素，并解释如何通过动画实现波浪的移动。 首先，我们要了解波浪效果的基本特征。波浪通常由连续的弧形组成，具有起伏变化的形状。在CSS中，`border-radius`属性...
流畅移动CSS教程·定位
HELLO_E_SIR的博客
07-19 447
通过定位，可以实现对元素更加精确的控制。
html css 移动元素,css样式中怎么移动div？
weixin_32509847的博客
07-02 2712
在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。css样式中移动div的方法：一、使用css3 transform:translate(X,Y)来偏移元素1、transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。使用tr...
CSS3矩阵理解———transform: matrix()改变元素运动的本质
水果烫瓜皮的博客
03-21 3268
在CSS3转换这个大板块里面，有很多的细小的分类。例如这类rotate（旋转）,translate（移动）,scale（缩小）,skew（扭曲），其实这类的函数都是为了供各位的开发者便捷使用的。那么在CSS3中也有这样一个比较神奇的参数matrix()，你想要真的能够用好它，还是需要一点线性代数的知识的哦。 在网上我也看了很多的技术贴，以及各类的博客。其实吧，大部分都是转的前端大佬张鑫旭的那...
使用css属性，使div上下左右移动
热门推荐
qq_26780317的博客
05-28 16万+
    在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素    transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。值描述none定义不进行转...
css 可移动元素,使用CSS移动元素
weixin_35253082的博客
08-04 1000
YOU如何更改CSS以将其移至页面的另一部分？使用CSS移动元素功能：$(document).ready(function(){$(".cb-enable").click(function(){var parent = $(this).parents('.switch');$('.cb-disable',parent).removeClass('selected');$(this).addClas...
css向上移动所有元素
06-03
要向上移动所有元素，可以使用CSS中的transform属性和translateY函数。例如，如果你想要将所有元素向上移动50像素，可以这样设置CSS样式： ```css body { transform: translateY(-50px); } ``` 这将使整个文档...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值