CSS3 transform-style 属性(3d转换模块)

3d转换模块

CSS3 transform-style 属性

默认情况下元素都是2D呈现的。通过该属性可以可以让元素呈现3D

transform-style: flat|preserve-3d;

flat默认取值为2D

preserve-3d取值为3D

注意点

transform-style和perspective属性都是设置到父元素中其子元素获得3D效果和透视属性，而不是其本身。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3d转换模块</title><style>* {margin: 0;left: 0;}.father {width: 200px;height: 200px;background-color: red;border: 1px solid #000;margin: 100px auto;transform: rotateY(0deg);perspective: 500px;transform-style: preserve-3d;}.son {width: 100px;height: 100px;border: 1px solid #000;margin: 50px auto 0;background-color: blue;transform: rotateY(45deg);}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
</body>
</html>

1.在父元素中设置3d属性，不断旋转父元素到90°时父元素为2d消失不见，但子元素却又厚度穿过父元素。

CSS3 transform-style 属性(3d转换模块)相关推荐

CSS3 transform变形属性、2D变形、3D变形
第十五章:transform变形属性一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
CSS3 Transform 【3D 】
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似.CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括trans ...
CSS3 transform动画 3D旋转立体正方形
CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYP ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
利用CSS3 transform属性制作漂亮的照片墙特效
CSS3 transform制作漂亮的照片墙特效 >>查看演示 >>下载地址转载于:https://www.cnblogs.com/delmarks/p/css3-zhao- ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...

CSS3 transform-style 属性(3d转换模块)

3d转换模块

CSS3 transform-style 属性

注意点

CSS3 transform-style 属性(3d转换模块)相关推荐

最新文章

热门文章