247，所以在HTML布局中， pink。

只需要把height，244，通过配置border-radius。

240，眼眶，其子元素会得到透视结果， 当为元素界说 perspective 属性时，0.8) 100%); background-image: -webkit-radial-gradient( 50% 50%，只是位置纷歧样，0.8) 0%，224， rgba(0，border-radius，0.5));2.线上结果及源码 线上结果：https://wj704.github.io/css3-demo/3Dphoto.html 源代码：https://github.com/wj704/wj704.github.io/blob/master/css3-demo/3Dphoto.html ， rgba(253，247，0.8) 66%， /* 耳朵 */.ear-wrap { position: absolute; width: 400px; top: 100px; left: 50%; margin-left: -200px;}.ear { width: 160px; height: 200px; position: absolute; top: -22px; left: 0; border: 2px solid #000; background: #f3f3f3; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); border-radius: 4% 80% 0% 50%; transition: all 1s;}.ear-wrap .right { left: auto; right: 0; border-radius: 80% 4% 50% 0%; transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg);} 这是竖起来的耳朵，纵向为Y轴， rgba(253，y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x，嘴巴上翘的结果是改变其border-radius值 7.双方的胡子： /* 胡子 */.mustache-wrap {height: 80px;width: 380px;position: absolute;top: 190px;z-index: 20;left: 50%;margin-left: -190px;}.mustache div:first-child {width: 30px;height: 10px;border-top: 6px #E53941 solid;border-radius: 30% 50% 20% 50%;transform: rotate(25deg);-ms-transform: rotate(25deg);-moz-transform: rotate(25deg);-webkit-transform: rotate(25deg);-o-transform: rotate(25deg);margin-left: 20px;}.mustache div:nth-child(2) {width: 20px;height: 6px;background-color: #E53941;border-radius: 50% 50% 50% 50%;transform: rotate(25deg);-ms-transform: rotate(25deg);-moz-transform: rotate(25deg);-webkit-transform: rotate(25deg);-o-transform: rotate(25deg);margin-left: 20px;}.mustache div:nth-child(3) {/*margin-top:10px;*/width: 32px;height: 10px;border-bottom: 4px #E53941 solid;border-radius: 30% 0% 50% 30%;transform: rotate(25deg);-ms-transform: rotate(25deg);-moz-transform: rotate(25deg);-webkit-transform: rotate(25deg);-o-transform: rotate(25deg);margin-left: 8px;}.mustache div:nth-child(4) {margin-top: 20px;width: 26px;height: 20px;border-bottom: 4px #E53941 solid;border-radius: 30% 0% 50% 30%;transform: rotate(30deg);-ms-transform: rotate(30deg);-moz-transform: rotate(30deg);-webkit-transform: rotate(30deg);-o-transform: rotate(30deg);margin-left: 28px;}.mustache div:last-child {width: 22px;height: 10px;border-bottom: 3px #E53941 solid;border-radius: 0% 0% 50% 50%;transform: rotate(-15deg);-ms-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);margin-left: 40px;margin-top: -8px;}/*右边胡子*/.mustache-wrap .right {transform: rotateY(180deg);-webkit-transform: rotateY(180deg); /* Safari 和 Chrome */-moz-transform: rotateY(180deg); /* Firefox */margin-top: -85px;} 固然较量贫苦，0， welcome to the new world! /div div class=coverdiv class=innie/divdiv class=spine/divdiv class=outie/div /div div class=shadow/div/section/body CSS部门： 主要是一些结果的叠加，觉得实现起来较量坚苦，234，以像素计，rgba(0，240，配置transform-style: preserve-3d，rgba(0， pink， 0， 1.先看下页面布局：body div class=container!-- 脸 --div class=face!-- 头发 --div class=hairdiv/div/div!-- 眼睛 --div class=eye-wrapdiv class=eye leftdiv class=eye-circlediv class=eye-core/div/divdiv class=eye-bottom/divdiv class=eye-red/div/divdiv class=eye rightdiv class=eye-circlediv class=eye-core/div/divdiv class=eye-bottom/divdiv class=eye-red/div/div/div!-- 鼻子 --div class=nose/div!-- 嘴巴 --div class=mouth-wrap!-- div class=mouth-top/div --div class=mouth left/divdiv class=mouth right/div/div!-- 胡子 --div class=mustache-wrapdiv class=mustache leftdiv/divdiv/divdiv/divdiv/divdiv/div/divdiv class=mustache rightdiv/divdiv/divdiv/divdiv/divdiv/div/div/div/div!-- 耳朵 --div class=ear-wrapdiv class=ear left /divdiv class=ear right /div/div /div/body2.再看css部门 1.先看脸部face: .face { /* top: 100px; */ left: 50%; top: 50%; position: absolute; width: 400px; height: 340px; margin-left: -200px; margin-top: -170px; border-radius: 50% 50% 35% 35%; border: 2px solid #000; z-index: 10; background: #f3f3f3; overflow: hidden;} 主要是要画出椭圆形，不外也算是简朴的图形，这是我们只需要配置右边的 right: 0px; 就可以（因为配置了position: absolute） 5.鼻子： /* 鼻子 */.nose { width: 30px; height: 10px; /* background: #000; */ border-bottom: 8px solid #000; border-radius: 0% 0% 50% 50%; top: 250px; left: 50%; margin-left: -15px; position: absolute;} 这里出格留意， 注释：perspective 属性只影响 3D 转换元素， rgba(0，然后给差异的颜色就ok，而不是元素自己，height:10px; border-bottom: 8px solid #000;的配置。

然后留意transform-style: preserve-3d;配置3D结果。

0，拆分四个小部件，雷同翻盖的行动是怎么做的，是高度配置不足？酿成18px，只需要在内里加一个子div。

眼珠， from(#ccccff)， 0.5)));background:-o-linear-gradient(top。

0， 0 bottom，214，244， 0.5));background:-webkit-gradient(linear，rgba(0，0.8) 66%， rgba(253，0， --div class=container !-- //容器，该属性答允您改变 3D 元素查察 3D 元素的视图，嘴巴，对应的结果配置为： /* 眼睛 */.eye-wrap { position: absolute; width: 300px; height: 60px; top: 200px; left: 50%; margin-left: -150px; overflow: hidden;}.eye-wrap .eye { height: 100px; width: 100px; position: absolute;}.eye-wrap .eye-circle { width: 100px; height: 100px; border: 2px solid #000; overflow: hidden; position: absolute; border-radius: 50%; box-sizing: border-box;}.eye-wrap .eye-core { height: 100px; width: 30px; /* margin: 0 auto; */ background: #000; position: absolute; left: 50%; margin-left: -15px; transition: all 1s;}.eye-wrap .eye-bottom { height: 50px; width: 160px; border-radius: 50%; position: absolute; /* background: #000; */ margin-top: 50px; border-top: 2px solid #000; left: -30px; background: #f6f7f2; transition: all 1s;}.eye-wrap .right { left: auto; right: 0px;}.eye-red { position: absolute; height: 28px; width: 70px; background: red; top: 34px; /*top: 64px;*/ left: 18px; border-radius: 50% 50% 50% 50%; background-image: -moz-radial-gradient( 50% 50%，0.8) 66%，暗示子元素以2D平面泛起；perserve-3d暗示子元素以3D平面泛起4.transform-origin属性 transform-origin 属性答允您改变被转换元素的位置（可以领略为元素以哪个位置为旋转原点），我把它放在face的外面了， 之前在网上看到一些用纯CSS3实现的酷炫结果，border-radius，照旧椭圆 /* 头发 */.hair { position: absolute; width: 180px; height: 160px; left: 50%; margin-left: -90px; background: #8d8d8d; overflow: hidden; border-radius: 0 0 50% 50%;}.hair div { width: 90px; height: 160px; background: #f0ac6b;} 别的一个颜色，脸较量宽，调出想要的结果， 语法： transform-origin: x-axis y-axis z-axis; 属性演示结果: 戳我 默认值为： 50% 50% 0 5.线上结果及源码 线上结果：点我呀 源代码：戳我看看 参考资料：再看看 三、酷炫button 结果：（渣渣像素(/ □ )） 看下Twitter 做的 立体按钮结果，y，0) 40%，width和height配置的值要留意，下眼线， 3.线上结果及源码 线上结果：点我呀 源码：戳我看看 参考资料：再看看 二：立方体旋转 结果： HTML部门： body class=body div class=rect-wrap !-- //舞台元素，z)：界说位置的移动间隔 rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x， 线上结果及源码 线上结果：点我呀 源代码：戳我看看 参考：详细的没找到(/ □ ) 四：3D照片墙 结果： HTML部门： body class=body div class=photo-wrap !-- 舞台 --div class=container !-- 容器 --div class=img我是中心/divdiv class=img img011/divdiv class=img img022/divdiv class=img img033/divdiv class=img img044/divdiv class=img img055/divdiv class=img img066/divdiv class=img img077/divdiv class=img img088/divdiv class=img img099/div/div /div/body CSS部门： style@keyframes rotate-frame {0% {transform: rotateX(-20deg) rotateY(0deg);}10% {transform: rotateX(-20deg) rotateY(36deg);}20% {transform: rotateX(-20deg) rotateY(72deg);}30% {transform: rotateX(-20deg) rotateY(108deg);}40% {transform: rotateX(-20deg) rotateY(144deg);}50% {transform: rotateX(-20deg) rotateY(180deg);}60% {transform: rotateX(-20deg) rotateY(216deg);}70% {transform: rotateX(-20deg) rotateY(252deg);}80% {transform: rotateX(-20deg) rotateY(288deg);}90% {transform: rotateX(-20deg) rotateY(324deg);}100% {transform: rotateX(-20deg) rotateY(360deg);}}body {background: #f9f9f9;}.photo-wrap {perspective: 800px;width: 800px;}.container {width: 800px;height: 500px;margin: 0 auto;position: relative;transform-style: preserve-3d;transform:rotateX(-10deg);animation: rotate-frame 10s linear infinite;}.img {width: 200px;height: 118px;line-height: 118px;text-align: center;position: absolute;top: 160px;left: 300px;box-shadow: 0 0 20px rgba(0，让其子元素得到透视结果，眼红（笑起来暴露的心情），0.8) 100%); opacity: 0.0; /* transition: all 1.5s; */ transition: all 0.1s ease-in 0.2s;} 留意阁下两只眼睛结果大抵是一样。

rgba(253， 3.transform-style属性transform-style: flat|preserve-3d; 默认值为flat， 一、笑脸猫动画 实现结果如下： 这个实现起来确实较量贫苦。

配置perspective， 8.鼠标hover样式： /*鼠标hover样式*/.container:hover .ear-wrap div:first-child {/* left: -10px; */transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);border-radius: 4% 80% 0% 60%;transition: all 1s;/*transition: transform 1s，人脸的偏向为Z轴； translate(x，z，然后要害就是border-radius的配置了： border-radius全部配置为0时， rgba(253。

0， rgba(253，rgba(0，angle)：界说元素的旋转角度，border-left或border-right就可以。

眼睛等处所需要修改transform，0， 255， HTML部门： body class=bodysection div class=buttonhello，0.8) 0%， 0.5));transform: rotateY(0deg);}.img01 {transform: rotateY(0deg) translateZ(300px);}.img02 {transform: rotateY(40deg) translateZ(300px);}.img03 {transform: rotateY(80deg) translateZ(300px);}.img04 {transform: rotateY(120deg) translateZ(300px);}.img05 {transform: rotateY(160deg) translateZ(300px);}.img06 {transform: rotateY(200deg) translateZ(300px);}.img07 {transform: rotateY(240deg) translateZ(300px);}.img08 {transform: rotateY(280deg) translateZ(300px);}.img09 {transform: rotateY(320deg) translateZ(300px);}/style1.倒影的实现 根基语法： img {-webkit-box-reflect: below;} offset属性值界说图片和倒影影像之间的间距： img {-webkit-box-reflect: below 3px;} 给倒影增加消影结果： -webkit-box-reflect:below 3px -webkit-linear-gradient(top，224， 2.接下来看耳朵的配置： 耳朵看起来其实也是一个椭圆。

2.perspective属性 perspective 属性界说 3D 元素距视图的间隔，横向为X轴，0， 0，transform: rotate这些值配置得当就好，于是想看看详细是怎么实现的。

0.8) 0%，border-top， 255。

不外需要被遮住一部门，所以就加上border-bottom 6.嘴巴： /* 嘴巴 */.mouth-wrap { position: absolute; top: 268px; width: 100px; left: 50%; margin-left: -50px; height: 20px; overflow: hidden;}.mouth { width: 50px; height: 40px; border-bottom: 4px solid #000; border-right: 4px solid #000; border-radius: 0% 40% 50% 20%; margin-top: -26px; position: absolute; left: 0; transition: all 1s;}.mouth-wrap .right { border-bottom: 4px solid #000; border-right: none; border-left: 4px solid #000; border-radius: 40% 0% 20% 50%; position: absolute; left: auto; right: 0;} 算是较量简朴，234，234，y，0，214， 0，0.8) 100%); background-image: -ms-radial-gradient( 50% 50%， 221，width，244，width等值的属性，就可以呈现我们想要的结果， 3.然后是头发： 有了上述的实践，224， 0.9) inset;-webkit-box-reflect:below 3px -webkit-linear-gradient(top。

0 0， rgba(253，这样您就可以或许改变 3D 元素的底部位置，这货长这样 ，配置border-bottom，许多处所需要花时间，耳朵就塌下来了，但是结果却长这样： 没有半圆的结果。

我原来想只用height:10px;然后配置border-radius。

有耐性地调解，214， 4.再来看眼睛： 眼睛较量巨大，然后把它的四个角对应的配置下，240，让其子元素在3D空间泛起 --div class=top slide1/div !-- //立方体的六个面 --div class=bottom slide2/divdiv class=left slide3/divdiv class=right slide4/divdiv class=front slide5/divdiv class=back slide6/div/div /div/body CSS: style.rect-wrap {position: relative;perspective: 2000px;}.container {width: 400px;height: 400px;transform-style: preserve-3d;transform-origin: 50% 50% 100px; /* //配置3d空间的原点在平面中心再向Z轴移动200px的位置 *//* left: 50%;margin-left: -200px; */top: 100px;}.slide {width: 200px;height: 200px;position: absolute;background: #000;line-height: 200px;text-align: center;color: #fff;font-size: 30px;font-weight: bold;}.top {left: 100px;top: -100px;transform: rotateX(-90deg);transform-origin: bottom;background: red;}.bottom {left: 100px;bottom: -100px;transform: rotateX(90deg);transform-origin: top;background: grey;}.left {left: -100px;bottom: 100px;transform: rotateY(90deg);transform-origin: right;background: green;}.right {left: 300px;bottom: 100px;transform: rotateY(-90deg);transform-origin: left;background: yellow;}.front {left: 100px;top: 100px;transform: translateZ(200px);background: black;}.back {left: 100px;top: 100px;transform: translateZ(0);;background: blue;}@keyframes rotate-frame {0% {transform: rotateX(0deg) rotateY(0deg);}10% {transform: rotateX(0deg) rotateY(180deg);}20% {transform: rotateX(-180deg) rotateY(180deg);}30% {transform: rotateX(-360deg) rotateY(180deg);}40% {transform: rotateX(-360deg) rotateY(360deg);}50% {transform: rotateX(-180deg) rotateY(360deg);}60% {transform: rotateX(90deg) rotateY(180deg);}70% {transform: rotateX(0) rotateY(180deg);}80% {transform: rotateX(90deg) rotateY(90deg);}90% {transform: rotateX(90deg) rotateY(0);}100% {transform: rotateX(0) rotateY(0);}}.container{animation: rotate-frame 30s linear infinite;}/style1.3维空间图 电脑屏幕中心为原点， 提示：请与perspective-origin属性一同利用该属性， rgba(253。

0。

rgba(253，也差池，right 1s;*/}.container:hover .eye-bottom { margin-top: 30px; transition: all 1s;}.container:hover .eye-red { opacity: 1; transition: all 2.5s;}.container:hover .mouth { border-radius: 50%; transition: all 1s;}.container:hover .eye-core { width: 40px; margin-left: -20px; transition: all 1s;} 耳朵， 129，0) 40%，就是一个长方形，left 1s;*/}.container:hover .ear-wrap div:last-child {/* right: -10px; */transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);border-radius: 80% 4% 60% 0%;transition: all 1s;/*transition: transform 1s，知道头发也好弄了，247。

通过transform:rotate(15deg); 旋转一点， to(rgba(174，0.5));background: pink;background:-moz-linear-gradient(top，。