CSS3：3D旋转rotate3d及3D呈现transform-style

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或自定义轴进行旋转。
语法格式：
transform:rotateX(45deg);沿着x轴正方向旋转45度；
transform:rotateY(45deg);沿着y轴正方向旋转45度；
transform:rotateZ(45deg);沿着z轴正方向旋转45度；

body {/*想看到3D透视效果需要给被观察元素的父元素添加透视*/perspective: 300px;}
.box{width: 150px;height: 150px;margin: 50px auto;background-color: skyblue;transition: all .3s;
}
.box:hover {/*沿着x轴正方向旋转90deg*/transform: rotateX(90deg);
}

3D呈现transform-style

控制子元素是否开启三维立体环境；
transform-style:flat，表示子元素不开启3d立体空间，默认就是flat；
transform-style:preserve-3d，表示子元素开启3d立体空间
该代码还是写给父级，影响的是子盒子

body {perspective: 300px;transform-style: preserve-3d;
}
.box,
.box2 {position: absolute;width: 150px;height: 150px;top: 50px;left: 50%;margin-left: -75px;background-color:pink;transition: all .3s;transform: rotateY(-70deg);
}
.box2 {background-color: skyblue;
}
.box2:hover {transform: rotateX(90deg);
}

呈现出来的是这样一个3D效果：

如果不给父盒子添加transform-style: preserve-3d;就会呈现出2D效果，如下：

CSS3：3D旋转rotate3d及3D呈现transform-style相关推荐

3D旋转rotate3d(X Y Z)
1 沿X轴旋转 2 沿Y轴旋转 3 沿Z轴旋转与前面旋转效果一样
CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）
3D移动translate3d transform: translateX(100px):仅仅是在X轴上移动 transform: translateY(100px):仅仅是在Y轴上移动 transf ...
3D旋转（CSS3）
3D旋转(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
3d旋转rotateX
rotateX左手准则代码例子: <style>body{/* 加个透视,会使3d旋转更加真实 */perspective: 500px;}img {display: block;mar ...
css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
CSS3 transform动画 3D旋转立体正方形
CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYP ...
【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

CSS3：3D旋转rotate3d及3D呈现transform-style

CSS3：3D旋转rotate3d及3D呈现transform-style相关推荐

最新文章

热门文章