织梦网站模板制作,wordpress一键安装脚本,最新在线代理服务器,网络营销成功案例介绍css的3d效果还是非常复杂的#xff0c;我今天简单学习了一下入门#xff0c;实现了一个超级简单的效果#xff0c;帮助我自己理解这个3d的过程#xff0c;实现的效果动画如下#xff1a;可以通过调整父元素旋转的角度#xff0c;更加直观的感受这个3d效果#xff1a; 实…css的3d效果还是非常复杂的我今天简单学习了一下入门实现了一个超级简单的效果帮助我自己理解这个3d的过程实现的效果动画如下可以通过调整父元素旋转的角度更加直观的感受这个3d效果 实现的原理是需要将body设置为所有元素的父元素并且添加3d透视说明。然后在里面包含一个子元素wrap背景色设置为天蓝色将这个元素也设置为3d透视并且进行旋转一定的角度。在这个wrap里面添加一个子元素并设置背景色为红色然后进行3d位移变化。然后到浏览器里面对wrap的旋转角度进行调整就会看到效果。源码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv classwrapdiv classitem1/div/divstylehtml,body {padding: 0;margin: 0;width: 100%;height: 100%;box-sizing: border-box;}body {width: 100%;height: 100%;transform-style: preserve-3d;perspective: 1000px;}.wrap {height: 100%;margin: 0 auto;background-color: skyblue;transform: rotateX(30deg);transform-style: preserve-3d;perspective: 1000px;}.item1 {width: 100px;height: 100px;margin: 0 auto;background-color: red;transform: translate3d(0, 200px, 100px);}/style/body
/html
