iPhone12纯色系搭配工具
css3d、css变量
作为一名小屏党，新年打算动手iphone12mini，于是针对相干信息作了些搜寻，最初决定等明年的13/12s。
而在浏览电商平台时，针对手机的色彩搭配也思忖了许久，于是乎撸了个色彩搭配器（非主动）来不便配色。
配色范畴
- 主色
- 侧边色
- 镜头块色
- 镜头边框色
- logo色
预览
跳转预览
技术点
三维建模
所谓 css3d , 其本质是在利用2维元素去拼装3维状态。操作的对象依然是2维的立体的盒子模型，即只有长（width）宽（height），没有高。
如果把手机模型视为一个矩形，那么拼装一部手机至多须要6个立体（上下左右前后）。
<div class="iphone-device"> <!-- 前 --> <div class="iphone-front"></div> <!-- 后 --> <div class="iphone-back"></div> <!-- 侧边-左 --> <div class="iphone-left iphone-side"></div> <!-- 侧边-右 --> <div class="iphone-right iphone-side"></div> <!-- 侧边-上 --> <div class="iphone-top iphone-side"></div> <!-- 侧边-下 --> <div class="iphone-bottom iphone-side"></div></div>设模型长宽高别离为：
- l:508px;
- w:239.99952px;
- h:30px;
Transform：
- 前后两面别离以Y轴旋转0度与180度，并减少z轴间隔为1/2h。
- 左右两面别离以Y轴旋转-90度与90度，并减少z轴间隔为1/2h 和 w-1/2h。
- 下面先以Y轴90度，再以Z轴旋转-90度；上面先以Y轴-90度，再以Z轴旋转-90度，并减少z轴间隔为l
圆角坑骗
上一步构建的模型是个纯正的矩形，那么如何实现3d圆角呢？因为咱们仍旧是在编辑立体元素，对于曲面的绘制无奈像3d建模一样利用算法实现无数个线立体拼凑成一个曲面。
然而，咱们能够用两个切面的角度来造成视觉坑骗，以达到曲面的成果。
css变量
模型实现之后，紧接着就是配色了，配色技术仍然是陈词滥调的 css变量。在根元素上申明所有的色彩变量，对应子元素以 var(--x) 的模式援用。
在Vue中，则利用 props 和 computed 属性来实现对象封装。
// index.css.iphone-perspective { ... --main: #bf2a2a; --side: #ede9e8; --cam: #bf2a2a; --camRing: #ede9e8; --logo: #ede9e8; --dur: 12s;}.iphone-front-s,.iphone-back-s,.iphone-front,.iphone-back { ... background: var(--side);}.iphone-brand svg{ ... color: var(--logo);}// PhoneColor.vue<template> <div class="iphone-perspective" :style="extraRoot"> ... </div></template><script> export default { name: "PhoneColor", props: { main: { type: String, default: '#bf2a2a' }, side: { type: String, default: '#ede9e8' }, cam: { type: String, default: '#ede9e8' }, camRing: { type: String, default: '#bf2a2a' }, logo: { type: String, default: '#ede9e8' }, animateSpeed: { type:Number, default: 12 } }, computed:{ extraRoot(){ const { main, side, cam, camRing, logo, animateSpeed = 12 } = this return { '--main': main, '--side': side, '--cam': cam, '--camRing': camRing, '--logo': logo, '--dur': `${animateSpeed}s` } } } }</script>Issue
- 侧边的按钮理论应该与主色配色统一，代码中是懒得画了间接切的图。
- 为了弥补圆角的冗余局部配色，前后各自减少了一个反面用来填色，从而导致了模型在旋转时会呈现穿模的景象。
源码
Style Code
/*index.css*/*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.iphone-perspective { position: relative; margin: 0px auto; width: 239.99952px; height: 508px; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 0%; -moz-perspective-origin: 50% 0%; perspective-origin: 50% 0%; --main: #bf2a2a; --side: #ede9e8; --cam: #bf2a2a; --camRing: #ede9e8; --logo: #ede9e8; --dur: 12s;}@keyframes show { 0%,100%{ -webkit-transform: rotateY(17deg) rotateX(17deg); -moz-transform: rotateY(17deg) rotateX(17deg); transform: rotateY(17deg) rotateX(17deg); } 25%{ -webkit-transform: rotateY(180deg) rotateX(-45deg); -moz-transform: rotateY(180deg) rotateX(-45deg); transform: rotateY(180deg) rotateX(-45deg); } 50%{ -webkit-transform: rotateY(272deg) rotateX(-45deg); -moz-transform: rotateY(272deg) rotateX(45deg); transform: rotateY(272deg) rotateX(-45deg); } 75%{ -webkit-transform: rotateY(367deg) rotateX(45deg); -moz-transform: rotateY(367deg) rotateX(45deg); transform: rotateY(367deg) rotateX(45deg); }}.iphone-device { position: absolute; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.7s ease-in-out; -moz-transition: -moz-transform 0.7s ease-in-out; transition: transform 0.7s ease-in-out; transform: rotateY(180deg) rotateX(1deg); animation: show infinite ease; animation-duration: var(--dur);}.iphone-device,.iphone-device > div{ position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}.iphone-front-s,.iphone-back-s,.iphone-front,.iphone-back { width: 239.99952px; height: 508px; border-radius: 34px; overflow: hidden; background: var(--side);}.notch{ background: #040404; width: 60%; height: 30px; margin: 0 auto; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; position: relative;}.notch::before,.notch::after { content: ''; height: 8px; position: absolute; top: 0; width: 8px;}.notch::before { background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%); right: -8px;}.notch:after { background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%); left: -8px;}.notch .camera { width: 6px; height: 6px; top: 9px; border-radius: 100%; position: absolute; right: 20px; background: #0d4d71;}.notch .speaker { height: 6px; width: 60px; left: 50%; position: absolute; top: 9px; margin-left: -30px; background: #171818; border-radius: 6px;}.iphone-cam-group{ position: relative; margin: 15px; border-radius: 24px; width: 35%; height: 20%; background: var(--cam); box-shadow: 3px 2px 5px 6px #d0cbcd;}.iphone-ba-cam1,.iphone-ba-cam2{ position: absolute; width: 35px; height: 35px; left: 10px; border: 5px solid var(--camRing); border-radius: 50%; background: radial-gradient(#2c2b31,#335fc2 12.5%,#3b3a3f 30%, #11110f 57.6%, #11110f);}.iphone-ba-cam1{ top: 10px;}.iphone-ba-cam2{ bottom: 10px;}.iphone-ba-light{ width: 6px; height: 6px; top: 15px; position: absolute; right: 20px; border: 1px solid #dce5ee; border-radius: 50%; background: #181617;}.iphone-ba-spot{ width: 20px; height: 20px; top: 50%; position: absolute; right: 12px; border: 1px solid #8a8a88; border-radius: 50%; background: radial-gradient(#ffffff,#bba99f 12.5%,#bba99f 30%, #f2e9e4 57.6%, #bba99f); transform: translateY(-50%);}.iphone-brand{ width: 100%; height: 20%; top: 50%; transform: translateY(-50%); position: absolute;}.iphone-brand svg{ color: var(--logo); width: 100%; height: 100%;}.iphone-top,.iphone-bottom { width: 30px; height: 179.99952px; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; background-size: 100% 100%;}.iphone-left,.iphone-right { width: 30px; height: 448px;}.iphone-front { border: 10px solid #040404; background: #444343 url(./waller.jpg) no-repeat top right; background-size: cover; -webkit-transform: rotateY(0deg) translateZ(15px); -moz-transform: rotateY(0deg) translateZ(15px); transform: rotateY(0deg) translateZ(15px);}.iphone-back { border: 1px solid #2e2c2d; background: var(--main); -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(15px); -moz-transform: rotateX(180deg) rotateZ(180deg) translateZ(15px); transform: rotateX(180deg) rotateZ(180deg) translateZ(15px);}.iphone-front-s { -webkit-transform: rotateY(0deg) translateZ(14px); -moz-transform: rotateY(0deg) translateZ(14px); transform: rotateY(0deg) translateZ(14px);}.iphone-back-s{ -webkit-transform: rotateX(180deg) translateZ(14px); -moz-transform: rotateX(180deg) translateZ(14px); transform: rotateX(180deg) translateZ(14px);}.iphone-right { background: var(--side) url("./side-right.png") no-repeat; background-size: 100% 100%; -webkit-transform: translateY(30px) rotateY(90deg) translateZ(224.99952px); -moz-transform: translateY(30px) rotateY(90deg) translateZ(224.99952px); transform: translateY(30px) rotateY(90deg) translateZ(224.99952px);}.iphone-left { background: var(--side) url("./side-left.png") no-repeat; background-size: 100% 100%; -webkit-transform: translateY(30px) rotateY(-90deg) translateZ(15px); -moz-transform: translateY(30px) rotateY(-90deg) translateZ(15px); transform: translateY(30px) rotateY(-90deg) translateZ(15px);}.iphone-top { background: var(--side) url("./side-top.png") no-repeat; background-size: 100% 100%; -webkit-transform: rotateZ(-90deg) translateY(15px) rotateY(90deg); -moz-transform: rotateZ(-90deg) translateY(15px) rotateY(90deg); transform: rotateZ(-90deg) translateY(15px) rotateY(90deg);}.iphone-bottom { background: var(--side) url("./side-bottom.png") no-repeat; background-size: 100% 100%; -webkit-transform: rotateZ(-90deg) translateY(15px) rotateY(-90deg) translateZ(508px); -moz-transform: rotateZ(-90deg) translateY(15px) rotateY(-90deg) translateZ(508px); transform: rotateZ(-90deg) translateY(15px) rotateY(-90deg) translateZ(508px);}.iphone-side:before,.iphone-side:after { position: absolute; top: -25px; left: 0; width: 30px; height: 23px; background: var(--side); background: -webkit-linear-gradient(bottom, var(--side) 0%, var(--side) 100%); background: -moz-linear-gradient(bottom, var(--side) 0%, var(--side) 100%); background: linear-gradient(to top, var(--side) 0%, var(--side) 100%); content: ""; -webkit-transform: rotateX(22.5deg) translateZ(-7px); -moz-transform: rotateX(22.5deg) translateZ(-7px); transform: rotateX(22.5deg) translateZ(-7px);}.iphone-side:after { top: 100%; background: -webkit-linear-gradient(top, var(--side) 0%, var(--side) 100%); background: -moz-linear-gradient(top, var(--side) 0%, var(--side) 100%); background: linear-gradient(to bottom, var(--side) 0%, var(--side) 100%); -webkit-transform: rotateX(-22.5deg) translateZ(-7px); -moz-transform: rotateX(-22.5deg) translateZ(-7px); transform: rotateX(-22.5deg) translateZ(-7px);}参考链接
为防止广啊啊告，周边种草链接就不放了，有须要的去原站点自取。
技术链接
- html5 css3 3D动画制作手机界面3D叠加突出动画成果
- 13 Pure CSS Mobile Devices.css
- apple-iphone-12-mini-3d
- CSS 变量教程