21-CSS中的3D属性
文章目录
- 一、什么是3D
- 二、景深
- 三、3D旋转
- 四、3D缩放
一、什么是3D
2D场景是在屏幕上水平和垂直的交叉线x轴和y轴
3D场景,是垂直于屏幕的方向,相对于3D多出个z轴
Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向
CSS中的3D变换主要包括以下几个功能函数:
- 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数
- 3D旋转:CSS3中的3D旋转主要包括rotateX(),rotateY(),rotateZ()和rotate3d()四个功能函数
- 3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数
使用3D样式前必须在父盒子上加上以下属性:
transform-style:preserve-3d;
# flat 默认不写时为flat,表示2d
二、景深
3D环境中存在 近大远小 的特点
通过设置"perspective:元素距离"来表示物体和眼睛的距离。物理和眼睛距离越小,远大近小的效果越明显
设置方法:
方法一:父盒子加:
perspective:1200px;
方法二:子盒子加:
transform:perspective(1200px);
通常使用方法一,在父盒子上设置景深(不设置表示无穷远,z轴移动看不出来效果),子盒子设置transformZ的移动才能看到近大远小的效果。
通常设置perspective为900px
当transformZ设置和perspective一样大时,相当于眼睛贴上去看,页面展示效果就是放满整个屏幕了
transform:translateZ(100px);
等价于:
transform:translate3d(0,0,100px);
三、3D旋转
transform:rotateX(30deg);
transform:rotateY(30deg);
transform:rotateZ(30deg);
transform:rotate3d(0,2,1,30deg); #前面三个值表示倍数,表示沿着y轴旋转60deg,z轴30deg
四、3D缩放
两个写法:
transform:scaleZ(10) rotateX(45deg);
transform:scale3d(1,1,10) rotateX(45deg);
若想设置scaleZ属性必须满足以下条件 :
#设置3d属性
#使用前先设置景深
#必须配合旋转才生效,否则看不出来有变化
21-CSS中的3D属性相关推荐
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
- html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码 在此处显示文字 效果 ...
- CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
- html页边距为负值,css中的padding属性可以为负值吗?css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧 首先我们介绍的是第一个问题 ...
- 【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
- html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性 语法: zoom:normal ...
- c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线?(代码示例)...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
- css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
最新文章
- HTML服务器控件与Web服务器控件的区别[转]
- asp.net mvc 身份验证中返回绝对路径的ReturnUrl
- mybatis学习4之使用注解开发实现简单的增删改查
- adnroid开发环境的搭建
- mysql 条件 函数_mysql 函数 时间函数,数学函数,字符串函数,条件判断函数
- [转]常见的用户密码加密方式以及破解方法
- Python学习笔记:集合(set)
- lz0-007 读书笔记11
- java springcloud版b2b2c社交电商spring cloud分布式微服务(十五)Springboot整合RabbitMQ...
- Spring 整合 Redis
- 泰山OFFICE在LINUX上的文件图标终于全部正确
- Linux的Cache Memory(缓存内存)机制
- 演讲者模式投影到幕布也看到备注_PPT的备注功能怎么使用?如何让备注仅被演示者看到?...
- 抖音快手短视频去水印API,接口开发文档
- SDN交换机在云计算网络中的应用场景
- 宾客往来络绎不绝 企业访客管理如何不失礼仪
- 小南迎宾机器人使用说明
- MSXML2.XMLHTTP
- 安卓手机端运行的adb工具_苹果、安卓手机端 移动营销、办公+华为云
- Day 09 (JAVA中的queryWrapper)
热门文章
- C++11多线程,thread库; mutex类,成员函数lock(), unlock();unique_lock<mutex>模板类
- Nokia手机命名方式
- Ubuntu手机开发者创新大赛-西安站-6月3日 周三07:00-10:30 西安邮电大学长安校区东区fz118
- makefile传字符串给c语言,makefile终极奥义
- 是德N9030B频谱分析仪主要特性和功能
- 金蝶K3 WISE 15.1金蝶K3 15.1金蝶K3 V15.1 金蝶K3 WISE 15.0金蝶K3 15.0金蝶K3 V15.0 14.3/14.2/14.1/14.0/13.1/13.0 12
- 基于多模态数据挖掘算法matlab,多模态生物数据分析与挖掘研究
- 解决java.util.MissingResourceException: Can‘t find bundle for base name resources.jdbc, locale zh_CN
- vCenter 6.7 HTML web console连接vm黑屏
- python 远程控制实例