HTML5 第三天

一、 认识 3D 转换
  1. 3D 的特点
  • 近大远小

  • 物体和面遮挡不可见

  1. 三维坐标系
  • x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值

  • y 轴:垂直向下 -- 注意:y 轴下面是正值,上面是负值

  • z 轴:垂直屏幕 -- 注意:往外边的是正值,往里面的是负值

二、3D 转换
  1. 3D 转换知识要点
  • 3D 位移:translate3d(x, y, z)

  • 3D 旋转:rotate3d(x, y, z)

  • 透视:perspctive

  • 3D呈现 transfrom-style

  1. 3D 移动 translate3d
  • 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向,就是 z 轴方向

  • transform: translateX(100px):仅仅是在 x 轴上移动

  • transform: translateY(100px):仅仅是在 y 轴上移动

  • transform: translateZ(100px):仅仅是在 z 轴上移动

  • transform: translate3d(x, y, z):其中x、y、z 分别指要移动的轴的方向的距离

  • 注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充

  1. 语法
 transform: translate3d(x, y, z)
  1. 代码演示
transform: translate3d(100px, 100px, 100px)
/* 注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)
三、透视 perspective
  1. 知识点讲解
  • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

  • 实际上模仿人类的视觉位置,可视为安排一直眼睛去看

  • 透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离

  • 距离视觉点越近的在电脑平面成像越大,越远成像越小

  • 透视的单位是像素

  1. 知识要点
  • 透视需要写在被视察元素的父盒子上面

  • 注意下方图片

d:就是视距,视距就是指人的眼睛到屏幕的距离
z:就是 z 轴,z 轴越大(正值),我们看到的物体就越大

  1. 代码演示
body {
perspective: 1000px;
}
四、 translateZ
  1. translateZperspecitve 的区别
  • perspecitve 给父级进行设置,translateZ 给 子元素进行设置不同的大小
五、3D 旋转rotateX

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

  1. 语法
  • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度

  • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度

  • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

  • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

  1. 代码案例
div {
perspective: 300px;
} img {
display: block;
margin: 100px auto;
transition: all 1s;
} img:hover {
transform: rotateX(-45deg)
}
  1. 左手准则
  • 左手的手拇指指向 x 轴的正方向

  • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

六、3D 旋转 rotateY
  1. 代码演示
div {
perspective: 500px;
} img {
display: block;
margin: 100px auto;
transition: all 1s;
} img:hover {
transform: rotateY(180deg)
}
  1. 左手准则
  • 左手的拇指指向 y 轴的正方向

  • 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

七、 3D 旋转 rotateZ
  1. 代码演示
div {
perspective: 500px;
} img {
display: block;
margin: 100px auto;
transition: all 1s;
} img:hover {
transform: rotateZ(180deg)
}
  1. rotate3d
  • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

  • x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度

transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg
  1. 代码演示
div {
perspective: 500px;
} img {
display: block;
margin: 100px auto;
transition: all 1s;
} img:hover {
transform: rotate3d(1, 1, 0, 180deg)
}
八、3D 呈现 transform-style
  1. transform-style
  • ☆☆☆☆☆

  • 控制子元素是否开启三维立体环境

  • transform-style: flat 代表子元素不开启 3D 立体空间,默认的

  • transform-style: preserve-3d 子元素开启立体空间

  • 代码写给父级,但是影响的是子盒子

  1. 代码演示
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 500px;
} .box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
} .box:hover {
transform: rotateY(60deg);
} .box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
} .box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head> <body>
<div class="box">
<div></div>
<div></div>
</div>
</body> </html>

扫一扫下面的二维码,关注我们,获取更多精彩活动资讯,有好礼相送哦~

微信赞助 微信打赏 支付宝打赏

免责声明:本文所有内容均为互联网上收集而来,仅供学习交流,整理文章为传播相关技术,如有侵权,请联系删除

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03的更多相关文章

  1. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02

    HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...

  2. 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

    HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...

  3. 2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件

    软件安装 VSCode软件 能够安装 VS Code 能够熟练使用 VS Code 软件 能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual ...

  4. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...

  5. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(四)

    1. 品优购项目(四) 1). 详情页 detail.html 常用单词 名称 说明 主体 de_container 面包屑导航 crumb_wrap 产品介绍 product_intro ( int ...

  6. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(三)

    品优购项目(三) 1. 首页制作 1). 楼层区 floor 注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少 2). 家用电器模块 这个模块 简单 不需要写样式 版心居中对齐 ...

  7. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(二)

    品优购项目(二) 1. 品优购首页布局 命名集合: 名称 说明 快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods ...

  8. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  9. 前端基础:CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

随机推荐

  1. Anaconda 安装 国内镜像问题解决方案

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 遇到问题:安装2021版本后无法打开Anaconda Navigator 解决方案:使用管理员身份打开Avaconda Prompt,输入conda ...

  2. 【文件系统】dumpe2fs命令

    dumpe2fs - dump ext2/ext3/ext4 filesystem information dumpe2fs prints the super block and blocks gro ...

  3. 三分钟掌控Actor模型和CSP模型

    回顾一下前文<三分钟掌握共享内存模型和 Actor模型> Actor vs CSP模型 传统多线程的的共享内存(ShareMemory)模型使用lock,condition等同步原语来强行 ...

  4. select 中的timeout

    1. select 相关man 资料 /* According to POSIX.1-2001 */ #include <sys/select.h> /* According to ear ...

  5. 如何使用docker制作开发集成环境

    1. 编写最基本的Dockerfile 内容:touch 一个Dockerfile FROM ubuntu 2. 创建基本的docker镜像 docker build  -t ubuntu:v1 . ...

  6. Java中实现多态的机制是什么?

    Java允许父类或接口定义的引用变量指向子类或具体实现类的实例对象,而程序调用的方法在运行时才动态绑定,就是引用变量所指向的具体实例对象的方法,也就是内存里正在运行的那个对象的方法,而不是引用变量的类 ...

  7. Docker 的目的是什么?

    Docker 提供了一个可用于托管任何应用程序的容器环境.在此,软件应用程序和 支持它的依赖项紧密打包在一起. 因此,这个打包的产品被称为 Container,因为它是由 Docker 完成的,所以它 ...

  8. @Required 注解有什么用?

    @Required 应用于 bean 属性 setter 方法.此注解仅指示必须在配置时使用 bean 定义中的显式属性值或使用自动装配填充受影响的 bean 属性.如果尚未 填充受影响的 bean ...

  9. redis主从复制与哨兵高可用

    redis主从复制 话不多说,直接看案例: 环境准备, 主从规划 主节点:6380 从节点:6381.6382 运行3个redis数据库,达到 1主 2从的配置 #主库 6379.conf port ...

  10. 遇到的错误之“Cannot find module 'XXX’的错误”

    一.问题: 在进行webpack打包的时候,会出现Cannot find module 'XXX'的错误,找不到某个模块的错误 二.解决方法: (1)方法1: 直接进行npm install重新打包: ...