一、transform是什么

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要是CSS3的内容，在运用之前需要加上transform-style 属性，它能规定如何在 3D 空间中呈现被嵌套的元素，属性值preserve-3d：子元素将保留其 3D 位置
flat：子元素将不保留其 3D 位置。

二、transform 属性值

rotateX(数字deg) 定义沿着 X 轴的 3D 旋转。（X、Y、Z的意思和用法相同）
translateX(数字px) 定义 3D 转换，只是用 X轴的值。（X、Y、Z的意思和用法相同）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D盒子</title><style>*{padding:0;margin:0;}.box{position:relative;width:300px;height:300px;border:2px solid black;margin:80px auto;perspective: 800px;     /* 景深 */transform-style: preserve-3d;      /* 让我的元素成3D在舞台上呈现 */}.item1{position:absolute;font-size:36px;font-weight:600px;width:100%;height:100%;background:rgba(178, 241, 5, 0.473);transform:rotateY(0deg) translateZ(0px);}.item2{position:absolute;font-size:36px;width:100%;height:100%;background:rgb(238, 60, 208);transform:rotateX(180deg) translateZ(150px);}.item3{position:absolute;font-size:36px;width:100%;height:100%;background:rgba(235, 8, 19, 0.5);transform:rotateY(90deg) translateZ(150px);}.item4{position:absolute;font-size:36px;width:100%;height:100%;background:rgba(231, 235, 12, 0.5);transform:rotateY(-90deg) translateZ(150px);}.item5{position:absolute;font-size:36px;width:100%;height:100%;background:rgba(74, 31, 192, 0.5);transform:rotateX(90deg) translateZ(150px);}.item6{position:absolute;font-size:36px;width:100%;height:100%;background:rgba(30, 177, 245, 0.5);transform:rotateX(-90deg) translateZ(150px);}</style>
</head>
<body><div class="box"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div></div>
</body>
</html>

效果图

总结：我们在制作类似这种3D效果的物品时，最好自己先画图，然后一个一个面去尝试调整角度，确定旋转的方向和角度。

三、景深

1、定义：沿光轴纵方向被摄主体前后可以接受的清晰范围。
**2、影响景深的重要因素：**光圈、镜头、及焦平面到拍摄物的距离
①光圈越大（光圈值f越小）景深越浅，光圈越小（光圈值f越大）景深越深。
②镜头焦距越长景深越浅、反之景深越深。
③主体越近，景深越浅，主体越远，景深越深。

CSS3的景深和transform 属性相关推荐

CSS3 变换/变形（transform）
在CSS3之前,要实现元素的平移.旋转.缩放和倾斜效果,常常需要依赖图片.Flash或Javascript才能完成. 在CSS3中,使用变换(transform),就能轻松实现这些效果,而无需加载额外 ...
html transform属性,css3 transform属性详解
CSS3变形是一些效果的集合,比如平移translate() .旋转rotate().缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们 ...
CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果
前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...
css3中transform属性及用法
通过transform属性来实现transform的各种变形处理功能.一般Safari3.1以上浏览器.Google Chrome 8以上的浏览器.Firefox 4 以上的浏览器及Opera 10以 ...
简单介绍css3的transform属性
transform翻译成汉语具有"变换"或者"改变"的意思.通过此属性具有非常强大的功能,比如可以实现元素的位移.拉伸或者旋转等效果最能体现transform ...
css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
放大旋转 css3,CSS3详解：transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

CSS3的景深和transform 属性

一、transform是什么

二、transform 属性值

三、景深

CSS3的景深和transform 属性相关推荐

最新文章

热门文章