iPhone12发布一个月了，作为还没有拥有过一个苹果设备的穷B程序员。这次，依旧还是买不起。

于是，使用css给自己画了一个。

先看效果：

需求分析：

1、分别画出6个面，然后组成一个立方体。

2、圆角部分使用多个div依次旋转一个角度，组成圆弧

一、画iPhone背面

先画一个圆角长方形；左下到右上渐变；增加border和内阴影使得看起来更立体。

.back {	position: absolute;	width: 307px;	height: 633px;	background: linear-gradient(65deg, rgb(26, 53, 64) 20%, rgb(37, 63, 76) 50%, rgb(117, 140, 154) 120%);	border-radius: 46px;	transform-style: preserve-3d;	border: solid 2px rgb(76, 100, 117);	box-shadow: inset 0 0 3px 1px;}

使用径向渐变画出画出一层一层的圆模拟摄像头的光圈。复制两个做出相机组。

.camera-group {	position: absolute;	left: 20px;	top: 20px;	width: 128px;	height: 128px;	background: linear-gradient(70deg, rgb(26, 53, 64) 46%, rgb(55, 81, 93) 46%);	border-radius: 30px;	transform-style: preserve-3d;	border: solid 2px rgb(76, 100, 117);	box-shadow: inset 0 0 3px 1px;}.camera {	position: absolute;	width: 46px;	height: 46px;	border-radius: 50%;	background: radial-gradient(#444 1px, rgb(0, 54, 161) 4px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);	border: solid 4px rgb(45, 72, 83);	box-shadow: 0 0 3px, inset 0 0 2px;}.camera1 {	left: 6px;	top: 6px;}.camera2 {	left: 6px;	bottom: 6px;}.camera3 {	top: 50%;	transform: translateY(-50%);	right: 6px;	bottom: 6px;}.camera4 {	position: absolute;	right: 20px;	top: 6px;	width: 25px;	height: 25px;	border-radius: 50%;	background: radial-gradient(rgb(214, 200, 217) 2px, rgb(214, 200, 197) 9px, rgb(45, 72, 83) 14px);	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);}.camera5 {	position: absolute;	right: 20px;	bottom: 6px;	width: 25px;	height: 25px;	border-radius: 50%;	background: radial-gradient(#333 1px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);}.camera6 {	position: absolute;	right: 10px;	bottom: 30px;	width: 3px;	height: 3px;	border-radius: 50%;	background: rgb(6, 6, 6);	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);}

画一个苹果的logo，这里就使用一个简单的画法，一个div+before+after，做出苹果logo的叶子和两个椭圆。拼凑起接近苹果的样子。使用mask-image给图片遮罩出一个豁口。

.logo {	position: absolute;	top: -30px;	left: -30px;	width: 145px;	height: 220px;	border-radius: 80% 70% 60% 90%/50% 50% 60% 100%;	background: linear-gradient(70deg, rgb(26, 53, 64) 70%, rgb(55, 81, 93) 50%);	transform: scale(.28);	transform-origin: 0 0;}.logo::after {	position: absolute;	content: '';	left: 97px;	width: 145px;	height: 220px;	border-radius: 70% 80% 90% 60% /50% 50% 100% 60%;	background: linear-gradient(70deg, rgb(26, 53, 64) 27%, rgb(55, 81, 93) 27%);	-webkit-mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);	mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);}.logo::before {	position: absolute;	top: -70px;	left: 117px;	width: 60px;	height: 68px;	background-color: rgb(55, 81, 93);	content: '';	border-radius: 100% 0;}

二、画手机正面

正面本来想一个div搞定，使用多个渐变图片背景。不过渐变的圆边缘会有毛刺效果不好看。

就简单的多画几个渐变背景的圆形div。

.front {	position: absolute;	width: 307px;	height: 633px;	background: rgb(239, 221, 197);	border-radius: 46px;	transform-style: preserve-3d;	border: solid 2px rgb(76, 100, 117);	box-shadow: inset 0 0 0 10px;	display: flex;	justify-content: center;	align-items: center;	overflow: hidden;	transform: translateZ(15px);}.front::after {	position: absolute;	width: 100%;	height: 100%;	border-radius: 46px;	box-shadow: inset 0 0 0 10px;	content: '';}.circle1 {	position: absolute;	width: 196px;	height: 196px;	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));	border-radius: 50%;	box-shadow: inset -10px 15px 50px rgb(255, 248, 147);}.circle2 {	position: absolute;	width: 196px;	height: 196px;	transform: translate(-60px, 0px) scale(1.9);	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42) 20%, rgb(254, 164, 104) 80%);	border-radius: 50%;	box-shadow: inset 10px -15px 50px rgb(255, 248, 147), inset -3px 8px 20px rgb(239, 221, 197);}.circle3 {	position: absolute;	width: 196px;	height: 196px;	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));	border-radius: 50%;	box-shadow: inset -5px 10px 30px rgb(255, 248, 147), inset 5px -15px 40px rgb(255, 206, 86);	transform: scale(2.8);}.circle4 {	position: absolute;	width: 196px;	height: 196px;	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));	border-radius: 50%;	box-shadow: inset -10px 15px 50px rgb(255, 248, 147);	transform: scale(3.6);}

加上刘海

.front-camera {	position: absolute;	top: 0;	width: 50%;	height: 32px;	background: #111;	border-radius: 0 0 18px 18px/15px;}.front-camera::before {	position: absolute;	left: 20%;	bottom: 10px;	width: 50%;	height: 8px;	background: #333;	content: '';	border-radius: 4px;}.front-camera::after {	position: absolute;	right: 20%;	width: 10px;	height: 10px;	content: '';	background: radial-gradient(#444 1px, rgb(0, 54, 161) 2px, rgb(14, 27, 29) 5px);	bottom: 9px;	border-radius: 50%;}

三、画两个侧边

两个侧边比较简单，长方形div。

在使用3个div，画做三个开关。开关translateZ(2px)的before和after伪元素做出一个立体图片的样子。

.side {	position: absolute;	width: 30px;	height: 541px;	background: rgb(37, 63, 76);	transform-style: preserve-3d;	display: flex;	justify-content: center;	align-items: center;}.switch {	position: absolute;	top: 80px;	width: 8px;	height: 50px;	border-radius: 4px;	background: rgb(37, 63, 76);	box-shadow: 1px 1px 2px, -1px -1px 2px rgb(167, 190, 204);}.switch-extra {	transform-style: preserve-3d;	transform: translateZ(3px);}.switch-extra::before {	position: absolute;	left: 0;	top: 5%;	height: 90%;	width: 3px;	background: rgb(37, 63, 76);	content: '';	transform-origin: left center;	transform: rotateY(90deg);}.switch-extra::after {	position: absolute;	left: 0;	top: 2%;	height: 96%;	width: 3px;	background: rgb(37, 63, 76);	content: '';	transform-origin: right center;	transform: rotateY(-90deg);}

四、画出顶部底部

这里跟上下两边类似

五、画出四个圆角

圆角需要是多个div旋转一定角度。拼接成一个圆弧

.pad-radius {	position: absolute;	width: 30px;	height: 9px;	background: rgb(37, 63, 76);}.pad-radius0 {	transform: rotateY(-90deg) rotateX(0deg) translateZ(48px);}.pad-radius1 {	transform: rotateY(-90deg) rotateX(10deg) translateZ(48px);}.pad-radius2 {	transform: rotateY(-90deg) rotateX(20deg) translateZ(48px);}.pad-radius3 {	transform: rotateY(-90deg) rotateX(30deg) translateZ(48px);}.pad-radius4 {	transform: rotateY(-90deg) rotateX(40deg) translateZ(48px);}.pad-radius5 {	transform: rotateY(-90deg) rotateX(50deg) translateZ(48px);}.pad-radius6 {	transform: rotateY(-90deg) rotateX(60deg) translateZ(48px);}.pad-radius7 {	transform: rotateY(-90deg) rotateX(70deg) translateZ(48px);}.pad-radius8 {	transform: rotateY(-90deg) rotateX(80deg) translateZ(48px);}.pad-radius9 {	transform: rotateY(-90deg) rotateX(90deg) translateZ(48px);}

六、将各个面拼接起来

代码仓库地址：

演示地址：