为父元素添加以下样式后,子元素即可使用3D属性,例如translateZ
/*设置子元素也应用3D效果*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d; /*设置旋转角度*/
-webkit-transform: rotateY(60deg);
-moz-transform: rotateY(60deg);
transform: rotateY(60deg); 为元素直接设置3D属性时候,记得一定要设置摄像机的位置:perspective,否者translateZ不会生效。
transform: perspective(1000px) translateZ(100px);

如果要设置元素具有3D的效果,那么,要将摄像机假设到它的父元素上,以下设置是设置其摄像机距离多远看子元素。
-webkit-perspective: 1400px;
-moz-perspective: 1400px;
perspective: 1400px;

CSS 3D的应用记录的更多相关文章

  1. EF Core使用SQL调用返回其他类型的查询 ASP.NET Core 2.0 使用NLog实现日志记录 CSS 3D transforms cSharp:use Activator.CreateInstance with an Interface? SqlHelper DBHelper C# Thread.Abort方法真的让线程停止了吗? 注意!你的Thread.Abort方法真

    EF Core使用SQL调用返回其他类型的查询   假设你想要 SQL 本身编写,而不使用 LINQ. 需要运行 SQL 查询中返回实体对象之外的内容. 在 EF Core 中,执行该操作的另一种方法 ...

  2. Intro to CSS 3D transforms

    原文地址:Intro to CSS 3D transforms,本文只是翻译了其中的一部分,省去了作者写文章的原因浏览器兼容部分(已经过时) Perspective 元素需要设置需要设置perspec ...

  3. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  4. Codrops 优秀教程:CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  5. 从css 3d说到空间坐标轴

    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好 ...

  6. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

  7. CSS 3D transforms

    https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759 https://github.com ...

  8. 关于css布局的一点记录

    1 关于css实现水平垂直居中的一些方法: .css的定位:用margin,padding,position position:absolute;   //绝对定位,一般父级元素采用relative来 ...

  9. 10个超漂亮的CSS 3D特效

    10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...

随机推荐

  1. linux取随机数shell版本

    #!/bin/bash aa=$(-) ..} do useradd $i echo $aa|passwd --stdin $i echo "${i} ${aa}" >> ...

  2. GPU硬件加速原理 /转

    现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...

  3. r语言,安装外部包 警告: 无法将临时安装

    安装R语言中的外部包时,出现错误提示 试开URL’https://mirrors.tuna.tsinghua.edu.cn/CRAN/bin/windows/contrib/3.3/ggplot2_2 ...

  4. html测试代码框工具

    Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --& ...

  5. 关于Unity中的屏幕适配

    一.Game视图的屏幕分辨率可以先自定义添加,供以后选择,以下是手游经常用到的分辨率: 1.1136X640,iPhone5 2.1920X1080,横屏,主流游戏都是这个分辨率 3.1080X192 ...

  6. Python之多进程

    1.Pool的用法 #!/usr/bin/env python # -*- coding: utf-8 -*- ''' @author: Shiyu Huang @contact: huangsy13 ...

  7. strcpy、strncpy、memcpy的区别

    一.strcpy.strncpy区别 struct gpInfo { char gpcode[9]; char gpName[50]; }; string gpstr = "SZ000001 ...

  8. e675. 翻转缓冲图像

    // To create a buffered image, see e666 创建缓冲图像 // Flip the image vertically AffineTransform tx = Aff ...

  9. linux下安装dovecot

    Dovecot是一个开源的,为Linux/Unix-like系统提供IMAP,POP3服务的软件.主要是为了安全产生的,不管大小应用,Dovecot都是一个非常优秀的选择.它非常快,配置简单,不需要专 ...

  10. SQLServer跨服务器访问数据库(openrowset/opendatasource/openquery)

    SQLServer跨服务器访问数据库(openrowset/opendatasource/openquery) 1.启用Ad Hoc Distributed Queries 在使用openrowset ...