网站空间类型,北京高端定制网站建设,网络登录认证,开发自己的app多少钱3d转换 位移 旋转 定义位移透视 perspective透视和Z轴使用场景 旋转子元素开启3d视图示例 小结 定义
3d转换在2d转换中增加了一个z轴#xff0c;垂直于屏幕#xff0c;向外为正#xff0c;向内为负。
位移
在2d位移的基础上增加了 translateZ(z); 在Z轴上的位移 t… 3d转换 位移 旋转 定义位移透视 perspective透视和Z轴使用场景 旋转子元素开启3d视图示例 小结 定义
3d转换在2d转换中增加了一个z轴垂直于屏幕向外为正向内为负。
位移
在2d位移的基础上增加了 translateZ(z); 在Z轴上的位移 translate3d(x,y,z); 同时定义在3个轴上的位移
透视 perspective
3D效果通过透视距离视距和z轴模拟人眼到盒子的距离
视距越大隔得越远物体越小视距越大隔得越近物体越大 Z轴越大隔得越近物体越大Z轴越小隔得越远物体越小。
透视距离需加载模拟3d的元素的父盒子上通过父盒子的视角去模拟3d近大远小的效果。
透视距离需 z轴的值否则相当于物体跑进我们眼睛里面了。
透视和z轴都可以调整最终观察到的物体大小
透视和Z轴使用场景
透视视距用于设置眼睛到屏幕的距离用于在父盒子上设置统一的视距。
Z轴用于给盒子内不同元素单独设置盒子距离屏幕的Z轴的值并体现出不同的大小。
旋转
和位移一样3d旋转在2d旋转的基础之上加了z轴的旋转。 同样要借助 基于父盒子的视距模拟3d效果。 对于旋转的的方向站在坐标轴正方向顺势针方向即为正向旋转逆时针即为负向旋转。
新增两个旋转属性
rotateZ(deg)沿着z轴旋转指定度数rotate3d(x, y, z, deg)沿着自定义轴线旋转
子元素开启3d视图
transform-styleflat默认不开启| preserve-3d 开启3d视图
同样这个属性是给到父盒子的。
!DOCTYPE html
html langenheadmeta charsetUTF-8title子盒子保持3d视图/titlestyle.box {position: relative;width: 500px;height: 200px;background-color: #ff6700;margin: 100px auto;perspective: 500px;transform-style: preserve-3d;}.box:hover {transform: rotateY(70deg);}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #ee20ee;}.box div:last-child {background-color: green;transform: rotateX(45deg);}body {perspective: 500px;}/style/headbodydiv classboxdiv/divdiv/div/div/body
/html示例
盒子前后面反转
!DOCTYPE html
html langenheadmeta charsetUTF-8title前后翻转盒子/titlestyle.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all .2s;perspective: 300px;transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.box * {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 150px;font-size: 20px;text-align: center;line-height: 300px;backface-visibility: hidden;}.box .front {background-color: #ee20ee;z-index: 1;}.box .back {background-color: #ff5000;transform: rotateY(180deg);}body{perspective: 300px;transform-style: preserve-3d;}/style/headbodydiv classboxdiv classfront今天要上学/divdiv classback作业没写完/div/div/body
/html3d菜单
!DOCTYPE html
html langenheadmeta charsetUTF-8title3d菜单/titlestyle* {margin: 0;padding: 0;}ul {margin: 100px auto;width: 200px;height: 100px;}ul li {float: left;margin: 0 5px;width: 100%;height: 100%;list-style: none;perspective: 500px;}div {width: 100%;height: 100%;text-align: center;line-height: 100px;}.box {position: relative;transition: all 0.6s;transform-style: preserve-3d;background-color: #ff5000;}.front {position: absolute;z-index: 1;top: 0;left: 0;background-color: green;transform: translateZ(50px)}.bottom {position: absolute;top: 0;left: 0;transform: translateY(50px) rotateX(-90deg); /*translateZ(100px)*/background-color: #ee20ee;}.box:hover {transform: rotateX(90deg);}body {perspective: 500px;transform-style: preserve-3d;}/style/headbodyullidiv classboxdiv classfront正面/divdiv classbottom底面/div/div/li/ul/body
/html围绕y轴旋转
!DOCTYPE html
html langen
headmeta charsetUTF-8title围绕一个y轴旋转/titlestylebody {perspective: 1000px;}.box {position: relative;margin: 200px auto;width: 200px;height: 200px;text-align: center;transform-style: preserve-3d;animation: three_rotate 10s infinite linear;}.box:hover {animation-play-state: paused;}img {position: absolute;top: 0;left: 0;width: 100%;}keyframes three_rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}.box img:nth-child(1) {transform: translateZ(300px);}.box img:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}.box img:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}.box img:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}.box img:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}.box img:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}/style
/head
body
!--动态转动都是围绕 .box 这个盒子的里面的图片都是事先摆在相应的位置相当于是附属在这个盒子上随着.box盒子的转动而转动--
div classboximg src../../img/抢购封面.jpgimg src../../img/抢购封面.jpgimg src../../img/抢购封面.jpgimg src../../img/抢购封面.jpgimg src../../img/抢购封面.jpgimg src../../img/抢购封面.jpg
/div
/body
/html小结
3d变换注意两个属性 perspective: 300px; 开启3d视图这个值必须比Z轴的值大且设置在要表现3d效果的盒子的父盒子上 作用让其子元素的3d属性呈现出立体的效果有近大远小的视觉 transform-style: preserve-3d; 保留子盒子3d效果默认当父盒子开启3d视图并且发生3d转换时子盒子会变成2d需要给父盒子加上此属性 作用使当前盒子开启在开启3d属性后其子元素依然保留已开启的3d效果
