css preserve-3d 使用

transform-style 设置元素的子元素是位于 3D 空间中还是平面中。所以 transform-style 是应该加在父盒子上面的。
可以把拥有这个属性的盒子想象成一个舞台，里面的子元素都是演员，他们可以随意表演，我们可以通过舞台观看
perspective 指定了观察者与 z=0 平面的距离，可以想象是我们和舞台的距离，如果我们离舞台更近是不是看到的东西越少，东西越大呢，如果我们离舞台越远看到的越多，演员也随之越小
只要开启了 transform-style: preserve-3d, 舞台也就是 3d 的，perspective 加不加无所谓的，它只是规定了我们和舞台的距离
demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {width: 200px;margin: 0 auto;transform: rotateX(10deg);transform-style: preserve-3d;}.div {text-align: center;transform-style: preserve-3d;animation: test 5s linear infinite;transform-origin: 50% 50%;}.div-inner {width: 200px;height: 200px;border-radius: 50%;transform: rotateX(90deg);background: red;}@keyframes test {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}.text {transform: translateX(80px) translateY(20px) translateZ(-360px);z-index: 999;}</style></head><body><div style="position: relative"><div class="container"><div class="text" style="">sdfdsf</div><div class="div"><div class="div-inner">SDFSDF</div></div></div></div></body>
</html>

css preserve-3d 使用相关推荐

html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
HTML+CSS制作3D步数统计界面
HTML+CSS制作3D步数统计界面效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...
利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
简单上手H5+CSS前端3D酷炫特效源代码
简单上手H5+CSS前端3D酷炫特效个人觉得是这个特效是入手自己做比较简单的一个前端特效代码十分少,也很容易看懂,记得点个关注效果图: H5部分 <!DOCTYPE html> & ...

css preserve-3d 使用

css preserve-3d 使用相关推荐

最新文章

热门文章