CSS3 3D 特效_技术笔记

洛洛洛洛洛 2020-05-20

给父元素设置
perspective: 800;（近大远小的视距，通常设置为800）
perspective-origin: 50% 50%; （设置视距的中心）
transform-style: preserve-3d;（父元素设置该值时子元素按3d风格展示）
子元素可以进行位移或旋转
transform: translateX(xpx)
transform: translateY(ypx)
transform: translateZ(zpx)
transform: rotateX(xdeg)
transform: rotateY(ydeg)
transform: rotateZ(zdeg)

0赞 · 0采集
旅途35 2019-12-05

悬停动态旋转

0赞 · 0采集
pinzaghi 2019-11-22

设置transform-style表示以3d形式处理元素

截图
0赞 · 0采集
精慕门3383071 2017-04-06

设置沿X轴旋转的块

截图
0赞 · 0采集
布拿拿 2016-12-18

俩个div之间的关系

截图
0赞 · 0采集
布拿拿 2016-12-18

搭3D场景

截图
0赞 · 0采集
suhj 2016-08-02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3D</title> <style> #experiment{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:-webkit-preserve-3d; } #block{ width:500px; height:500px; background-color:#ccc; margin:100px auto; -webkit-transform:rotateX(45deg); } </style> </head> <body> <div id="experiment"> <div id="block"> </div> </div> </body> </html>

0赞 · 0采集
qq_落椛藏LU_0 2016-07-23

transform:rotateX(45deg); rotate的各轴效果：X：上面远离屏幕；Y：右边远离屏幕；Z：直接平面旋转

0赞 · 2采集
木真0 2016-07-14

111

截图
0赞 · 0采集
冷月诗魂 2016-03-30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3D</title> <style> #experiment{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:-webkit-preserve-3d; } #block{ width:500px; height:500px; background-color:#ccc; margin:100px auto; -webkit-transform:rotateX(45deg); } </style> </head> <body> <div id="experiment"> <div id="block"> </div> </div> </body> </html>

1赞 · 0采集
Web__123 2016-03-29

简单的3D

截图
0赞 · 0采集
Amy1234567 2016-02-19

3d场景在包裹层 perspective：800; perspective-origin：50% 50%; transform-style：preserve-3d;

0赞 · 0采集
qq_翱翔_0 2016-02-15

css3中-moz、-ms、-webkit各什么意思 -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性

0赞 · 1采集
空空气息 2016-01-03

3D操作基本的演示设置

截图
0赞 · 0采集
倒骑毛驴 2015-12-01

创建3d场景

截图
0赞 · 0采集
weibo_飞舞的团子_0 2015-11-13

3d旋转

截图
0赞 · 0采集
weibo_飞舞的团子_0 2015-11-13

3d设置

截图
0赞 · 0采集
yoyo16ying 2015-09-06

-webkit-persperctive:800;物体距离屏幕 -webkit-persperctive-origin:50% 50% 看人距离屏幕 -webkit-transform-style:-webkit-preserve-3d;通过3d方式展示

截图
0赞 · 0采集
qq_疯子_9 2015-08-23

创建3d场景

截图
0赞 · 0采集
梯田码农 2015-08-16

3d0

0赞 · 0采集
梧桐_细雨 2015-08-11

perspective：800; perspective-origin：50% 50%; transform-style：preserve-3d;

0赞 · 0采集
lweb 2015-08-08

创建3D场景，浏览器默认是2D的如果不做下面的设置，即使写transform:translate3d(0,20px,0)实现的也是2d的效果 perspective:800;视距（浏览器窗口距离3D物体的距离），单位px，设置后，物体的显示大小和原来一致，只是规定了一个物体运动的空间 perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点 transform-style:preserve-3d;变换应用于3d场景上面这三行代码写在应用3D效果元素的父元素上 Z轴是屏幕冲向我们的 transform:translateX(100)向右移动100px transform:translateX(-100)向左移动100px transform:translateY(100)向下移动100px transform:translateY(-100)向上移动100px transform:translateZ(100)向外移动100px（类似放大，原因是物体距离浏览器的间距小了） transform:translateZ(-100)向里移动100px transform:rotateX(45deg)后倾 transform:rotateX(-45deg)前倾 transform:rotateY(45deg)左倾 transform:rotateY(-45deg)右倾 transform:rotateZ(45deg)顺时针转 transform:rotateZ(-45deg)逆时针转 x轴y轴z轴都是，箭头冲向自己，顺时针转为正值，逆时针转为负值 perspective: 500px;/3D物体距屏幕的距离 perspective-origin: 10% 10%;/3D元素基点基于X,Y轴的位置 transform:rotate(45deg);/2D/3D转换，旋转，缩放，移动或倾斜 transform-origin:20% 40%;/旋转元素的基点位置 perspective:800; 表示浏览器中的物体到浏览器这个平面之间的距离 perspective-origin:50% 50%; 表示视点，即从浏览器哪个位置看进去，这里就是浏览器中心 transform-style: preserve-3d;使被转换的子元素保留其 3D 转换

0赞 · 0采集
lweb 2015-08-08

perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点 transform-style:preserve-3d;变换应用于3d场景 1、确定浏览器将会离将要观察到的3维物体的距离 2、3D中心origin 3、告诉浏览器体现3D效果 -webkit-transition-style: -webkit-preserve-3d

0赞 · 0采集
马太胖 2015-08-01

本人使用Firefox，跟着老师敲CSS，发现无法实现3D效果；经过尝试，在perspective应该跟上px：perspective:800px;

截图
4赞 · 7采集
木昜_ 2015-07-29

3D场景的创建

截图
0赞 · 0采集
木昜_ 2015-07-29

3D场景的创建

0赞 · 0采集
桥风L 2015-07-25

perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点 transform-style:preserve-3d;变换应用于3d场景 1、确定浏览器将会离将要观察到的3维物体的距离 2、3D中心origin 3、告诉浏览器体现3D效果 -webkit-transition-style: -webkit-preserve-3d

0赞 · 0采集
墨西哥鸡味卷 2015-07-15

设置3D时 1、确定浏览器将会离将要观察到的3维物体的距离 2、3D中心origin 3、告诉浏览器体现3D效果 -webkit-transition-style: -webkit-preserve-3d

0赞 · 1采集
墨西哥鸡味卷 2015-07-15

创建3D场景，浏览器默认是2D的如果不做下面的设置，即使写transform:translate3d(0,20px,0)实现的也是2d的效果 perspective:800;视距（浏览器窗口距离3D物体的距离），单位px，设置后，物体的显示大小和原来一致，只是规定了一个物体运动的空间 perspective-origin:50% 50%;视点在浏览器的正中心，也是xyz三轴的交点 transform-style:preserve-3d;变换应用于3d场景上面这三行代码写在应用3D效果元素的父元素上 Z轴是屏幕冲向我们的 transform:translateX(100)向右移动100px transform:translateX(-100)向左移动100px transform:translateY(100)向下移动100px transform:translateY(-100)向上移动100px transform:translateZ(100)向外移动100px（类似放大，原因是物体距离浏览器的间距小了） transform:translateZ(-100)向里移动100px transform:rotateX(45deg)后倾 transform:rotateX(-45deg)前倾 transform:rotateY(45deg)左倾 transform:rotateY(-45deg)右倾 transform:rotateZ(45deg)顺时针转 transform:rotateZ(-45deg)逆时针转 x轴y轴z轴都是，箭头冲向自己，顺时针转为正值，逆时针转为负值 perspective: 500px;/3D物体距屏幕的距离 perspective-origin: 10% 10%;/3D元素基点基于X,Y轴的位置 transform:rotate(45deg);/2D/3D转换，旋转，缩放，移动或倾斜 transform-origin:20% 40%;/旋转元素的基点位置 perspective:800; 表示浏览器中的物体到浏览器这个平面之间的距离 perspective-origin:50% 50%; 表示视点，即从浏览器哪个位置看进去，这里就是浏览器中心 transform-style: preserve-3d;使被转换的子元素保留其 3D 转换

1赞 · 4采集
EElili 2015-07-06

设置3D时 1、确定浏览器将会离将要观察到的3维物体的距离 2、3D中心origin 3、告诉浏览器体现3D效果 -webkit-transition-style: -webkit-preserve-3d

0赞 · 0采集

数据加载中...